/* ═══════════════════════════════════════════════════════════════════════════════════════════ XCurOS — the website. One sheet, both languages, both themes. THE SYSTEM. Three faces. Michroma — wide, squared, geometric, one weight — for the NAME and nothing else (the wordmark, the splash, the model's lockup). Sora for the headlines: a geometric grotesque with a squarer skeleton and tighter joints, which is what a line set at 56px needs to look drawn rather than typed. Plus Jakarta Sans — soft, curved terminals — for everything read. One canvas: black, flat, no glow and no grid (a standing rule for this product: the background must be black). One surface: glass — a translucent gradient, a hairline border, an inner highlight, blur where the canvas shows through. One accent, ice, and the violet it fades into. One radius scale (14 / 22 / 28 / pill). The pages are listed in the top strip; the hero is a sentence beside a world the GPU draws. EVERY LOOP IS SEAMLESS BY CONSTRUCTION: an infinite animation here either rotates a full 360°, or is a symmetric keyframe set whose 0% and 100% are the same frame (ease-in-out both ways), or translates a track that carries two identical copies by exactly one copy. Nothing snaps back. Every layout rule is written with LOGICAL properties (margin-inline, inset-inline-start, text-align:start …) so the sheet mirrors itself the moment is set; the Arabic block at the bottom swaps the faces and a few metrics and nothing else. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── tokens ─────────────────────────────────────────────────────────────────────────────── */ :root{ --bg:#000000; --bg-2:#07080c; --surface:#0b0c11; --surface-2:#13151c; --elev:#181a22; --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.17); --text:#eef0f6; --muted:#9ba1b4; --faint:#7c8199; --accent:#7dd3fc; --accent-2:#a78bfa; --accent-3:#38bdf8; --brand:#f97316; --ok:#34d399; --warn:#fbbf24; --danger:#f87171; /* --danger-ink is what .cf-note.bad reads. It was read and never defined, and an undefined colour falls back to the plain text colour, so every refusal was printed like any other line. */ --ok-ink:var(--ok); --warn-ink:var(--warn); --danger-ink:var(--danger); /* glass: the fill, the hairline, the inner light */ /* Tinted, not grey. On a black page a neutral panel reads as a hole; the same panel with a few per cent of the planet's blue in it reads as a surface with light falling on it. */ --glass:linear-gradient(168deg,rgba(126,178,255,.10),rgba(120,170,255,.028) 58%,rgba(255,255,255,.018)); --glass-2:linear-gradient(168deg,rgba(140,190,255,.155),rgba(120,170,255,.05)); --glass-line:rgba(152,196,255,.155); --glass-hi:rgba(190,220,255,.18); --cta:#ffffff; --cta-ink:#080a10; --grad:linear-gradient(90deg,var(--accent),var(--accent-2)); --glow-a:rgba(56,189,248,.36); --glow-b:rgba(139,92,246,.30); --shadow:0 30px 80px -40px rgba(0,0,0,.8); /* THE X — the logo's short form, never in a frame (xcuros-web/tools/brand.py, 2026-11-08). A white X used as a MASK, so whatever paints through it picks the colour per theme. It rides inline so it paints with the first frame; src/build.py lifts it from playground.html, the one place it is written. The model card draws it at 12rem, past what the 256px inline one holds on a 2x screen, so that one is a 512px file (version in the name: /vendor is immutable for a year). */ --mark:url("data:image/webp;base64,UklGRlALAABXRUJQVlA4WAoAAAAQAAAA/wAArAAAQUxQSMwJAAAB8Idt2zK12fYdM8NAcIkBcafE3V3pHXd3z+LJXZdI3Unq7u7ubYx4sniytHFSikOwGRjm2m/NdV3HcV4n/0bEBJDVyz4UPox0OLLPsmd37bUs4TxkF7bSHHe7RS8erwYOzPBaRinXZeFcrMY0X/phPgAEvxpGtk40ZOELt5bUTtv8bSH+Z/EjTcjurcKwTTvC07afw/8v3hJP9ru/EGZM1gl3x3XfVeAGi7fEE8uYM7JQ1kEXUtd+XoAbLt4ST1xbFcnC5boa4O66+QxMlj6UQIzTqmXhlxCHixj3ai7MFm+JJ963CkO6kzVf+mEJTJc+lEDcXe8JwwKn6vrEeVhYvDWeBEYcE+bv5UTN7joLK0u2xpPMJrmykJXsNI037DNgZdUz9Uhsv0pZOBLuJI3W7jFg7U/tSPJqYXjdMWqv3WfA4oy+JPwlYVjnDF1fKIfVl+e6SHrYPmGBoeprdtd5WJ632ksKTLwmCwUt1RY/9ycDllelx5Eae/ll4USUulxDPqqC9cYHzUmZc4XhM7eiYpaegJ1H+5NKdwjDvUpKSS+FnflrPaRU72/CguOVEzJlN2ytfCyWVFv3siyUtFVLndszYe83rUnBnctl4c8EhTR9xgd7r00kNU8yZOGnEFU0T/fD3uALMaTqh4XhcTV0/zAImw93JXV7vhOGOfLcY3bC7utrPKTymDPCfD2Ehc09Ddu/akyKTy2RhcxESQl358D2S6NJ/WODspARJqbu5mLYHkiPIie8RxheEtJ4RwXs39eBnNH1gTCsktAo3Qf7fbd6yCmjTggLDGbXKN0HhvtSyEFbFshCblNeSc9WgmHFJg856ohqWTgWySj2vjJwzGhDTrtJGD5xcQldmg2Ovls95LyvCsMdPNxTLoDlvhRy4vDDwoKjOYw4AZYVGz3kzI1yZKGkrW03fQie+1LIsQdUycK5OHsSX6oGy8CdHnLwFcLwg8eGkLXF4HmpLzn7C8LwkHWDToLph3Hk8KF7heUkWtT4QzAtmkbOn3hN1Nt1yNLwe8rBdE9j0sHOFXKyJpC1Yy6CqZHuJT2cI8V4IYYsbfMduOalkTY+JeP8ALI07qkAuP6aTPoY8ouEV6LJSvfCHHCt3uwhnUw4z65oBlnaZS/Y5o0kzexYxuz7JLIy9vkg2O5rRNo5weDkv9VNVqZdBd8XQklD72d0phNZGfcC+JZOJy11f83FeDqcrJySA77nUklTY8/xyBlNVtb/GIw/jyFtbV3E4fsksnJKHvgaD7lJY0dW21ax1kUWJn4KxtfHk97eadeRNmSha0ERGJ9oSZrr+sieHWFkYeLX4PxJFGlv+BEbrk8nKyfmgbHxkJs0uEmuZUdakoUxL4Czbzbp8dCANcb2MLJwwGVwvtqFdHmdJcVTycKQzdXgvC+R9PllCw42JwtTjoD1B+Gk0bUOmjEe8ZKFKyrA2bjHRVqd9NeN+eaQhbHvg7V/Nul2b/+NZHYjCwdlgnV+f9LvpTewsx6ZD9lWDdanmpKOP/d/nvOS+aZ7wfvXONJy767/8i0kC6cWgffboaTptS8CmT3JfK10ME93k7Z3Kt9Zn8ynngDv6pWk891DyPxyH3iXjaGaZdhLYF7Yl2qWyfvA/K/2VLPscgXMzzSimuUiP5jvTaAaZchD4P5jFNUokzPA/V0v1Sj7ZoH7c26qUS6tBPeHqEYZ9gq4G7dSjTJ5H7gba6hG2TsL3AOzyHR9rZvtA/eqyWR6dFmavnm2g71/DJmeE0B+c12L+hLsK0aQ6ZVBAGdi9KzBUbAvG0amb8X//NSlY72ywb6kL5l1p+P/3qlhkyvAvqQPmQ19D/8/OFq71gbBvmwgmY36Djda0lavPM+Cf0kfMlvvMG78bKxORX4J/mUDyWziSZj93qNPSUfAv6QPmW12Aea3aVO7K+Bf1p/MplyDhcYkTRpUBP4VQ8hsajYsLW2vRZN84F/5DzKbkgWLL9XRoLVB8K8aS2ZTsmD5zyG6494OgYHJZDY1GzY+pjmh70Fg9Swym5oNW2dpTcS3EGgsJbMpWbDX111j4vdAoLGSzKZkwe6r9bSlwSlIXEdmU7Nh/06vpjS7CIm3kdnUbHB8Rk9SMiFxM5ltlQWeS3Skcy4kPkVmm2eCqb+3fnQvgMQvPGYaXQTbvxvqxqASSNxZi0zWPwvGR8L1YqwPEk/Hk8n6Z8H6Va2YVgWJ1xqTybjjYL5aI2YFIPF6JzJZaye4BwZrw7IgJFYNJ5Oej8A/v7kmbDQg0ZhJZp+HxKMRWrAJMjeR2S2Q+bFLA26HzO1kdgWk/tP5NkHmlx4zs4Nigjc73SbI3B9BJscHILewpbPdCplna5PJtEpIPhXtZOsh8++mZLJuOWR/6nKuxYaMip5keosw3ONYC4IQGZxA5l0fCTMmO9TcIGRuICujT8lCSVtHmhyAzJfI2lZFsvBHnANNCkDmdyEW0c1BWfjW7TgjKyHzeAxZfrswPOg0PUshs6A5We96T5gx3VnaFkBmYDDZGX5YFiq6OkmjqxC6huxtkisLl+s6R9KfEPo62T00IAu/hDhFnVMQejTcNlonDE85ROxhCM1uSAxfEYZFjhC9H0L9fYljrYPCfN0dIGInpM4lng2zZSEzUXmeTyH1IeLaxy8LGWGq2w6p33rY0HxheE1xt0Dq6Vhi/LwwLFPa1KCU/BbE2fu7sKqBChvgh9CqgcS7fqYsZDdS1k2FkLqEuHcul4WjEYpKugSpjxH/ecLwhpqij0JqhlcAPSUM61Tk/R5ScxqQRM/3wqpHqcf1GqQGR5DMhPOyUNBCOQ9C7F0ktUOZLByPVMwKiP3OLYamGbLwgUsp/SvFXK1Dgh8UhttV0jQPUqv6kmT318KCo9URfRJi15DsmNOyUJKqCvcXEPu5Sxi1KZaFc7GKeAhi/4gh8eOCsvCFWwkLINbXmRR4rzBsUcHASjkLSIWuD4UZU+WlFkHsq6TG6FOyUNpOWp0/IfZEhCKoWZ4sXKojq1YGxJamkDKHV8vCTyGSXO9A7hRS6C3C8IikByA3nVTqek8YZsoZZ8g5EKoUCj8kzNdNSqtiiC1oSoptnCsLV+rJiDwBscZoUu7ggCz87hXxOuTuIAWvEYYdElZB7ulwFdFLwrCEXw+/HH9HUnLYfmFV/bklXILc1aToxGuy8HcDXu7vIfcbl6qoT6UsZISx2gy5OYmk7nnC8AanIdVyjNGk8meFYRWfhrmQ+yQp3fu7sKpBXLwZkHsiTG1U/6os5DRm8iTk+juQ6rtWyMKRcBbjDEEbSf2zhOEdDq2uQ+4ujwPQ48Kwyb7IU5Bb3ISc0POtsGCaba9D8CxyxoTzslDY0i5WUDggXgEAAHAdAJ0BKgABrQA+MRSJQyIhIRY/LAAgAwS0t3C21wB/IBp5u5foB/APwA/QD+Ffv73+C89YjdDf2XFcdfBiWwy7glLjS7zyXuD8D3RzidPLFE9ziUebFZSJVel8NmyYudVpHZotX5DW4fiVOP7gdk9wmAIkfkAHgwovMI7yohDqtI7NCizXqfhiOsGIQ8SklZOlHTuHlfr6bmIQ8SklZOlWuIx+7L6NN8UPEpJWTpVrgKRN6HTeaUd1Jr/6uIxE/DEby5R2bnqJpLbUgu5xrdQG9DqNmBUgm4xXjEn5m4w0+BRJr/6uIxFFvxZlQ3kqfBXIBuAA/tcl/6hEoD6Uf///anuvUI++TLQPku/2MYH8nVfky+Xfy+PyeF+TMg/JnR/J3XrZwn/yd10lv//JhH5JzR+TCPyTjd+TCPyUu/kzGfyYR+Sl38nddJbn38lL/5Mr8amWh8nhfkyoAAAA"); --mark-big:url(/vendor/mark-v6.webp); /* THE NAME IS THE LOGO (2026-11-08): the wordmark, one path, written in by tools/brand.py from brand/xcuros-wordmark.svg. It is a MASK, painted currentColor — white on the dark theme, ink on the light one, from the one file. --mark above is its short form, the X. */ --wm:url("data:image/svg+xml,%3Csvg xmlns=%22http%3A//www.w3.org/2000/svg%22 viewBox=%220 0 1144.9 100.2%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M64.4 40.7L69.8 37.5L73.4 35.4L77.1 33.3L82.6 30.4L86.2 28.5L89.3 27.0L53.2 0.2L5.7 0.2L62.1 42.0ZM47 92.6L51.1 88.7L55.4 84.9L59.6 81.2L63.9 77.5L68.3 73.8L72.7 70.3L77.2 66.8L81.7 63.4L86.2 60.0L90.8 56.7L95.5 53.4L100.2 50.2L105 47.1L109.9 44.0L114.8 41.0L119.7 38.1L124.8 35.2L129.8 32.4L135 29.7L140.2 27.0L145.5 24.4L150.8 21.8L156.2 19.3L159.8 17.7L165.3 15.3L169 13.7L174.6 11.5L178.4 10.0L186.1 7.1L191.9 5.0L199.7 2.3L205.7 0.4L205.7 0.0L201.6 0.5L197.6 1.0L193.6 1.6L189.6 2.2L185.6 2.9L181.6 3.6L175.7 4.7L171.8 5.6L167.9 6.4L162 7.8L158.1 8.8L154.2 9.8L148.4 11.4L144.6 12.6L140.8 13.7L137 15.0L133.2 16.2L129.4 17.5L125.6 18.9L120 21.0L116.2 22.5L112.5 24.0L107 26.4L103.3 28.0L99.6 29.7L94.2 32.3L90.6 34.1L87 35.9L81.6 38.8L78 40.7L74.5 42.7L69.2 45.8L65.7 47.9L62.3 50.1L57.1 53.4L53.7 55.7L50.3 58.0L45.2 61.6L41.8 64.0L38.5 66.5L33.6 70.3L30.3 72.9L27 75.5L22.2 79.5L19 82.3L15.9 85.1L11.2 89.4L8.1 92.3L5 95.2L0 100.2L39.1 100.2L42.8 96.5ZM263.3 1.0L261.7 1.5L260.2 2.0L258.6 2.7L257.1 3.4L255.6 4.2L254.2 5.2L252.8 6.2L251.5 7.2L250.2 8.4L249 9.6L247.8 10.9L246.8 12.2L245.8 13.6L244.9 15.0L244.1 16.5L243.4 18.0L242.7 19.5L242.2 21.1L241.8 22.6L241.4 24.2L232.3 76.2L232 77.8L231.9 79.3L231.9 80.9L232 82.4L232.2 83.9L232.5 85.4L232.9 86.8L233.4 88.2L234 89.5L234.7 90.8L235.4 92.0L236.3 93.2L237.3 94.2L238.3 95.2L239.4 96.2L240.6 97.0L241.9 97.7L243.2 98.4L244.5 98.9L246 99.4L247.4 99.7L248.9 100.0L250.5 100.1L252 100.2L350 100.2L351.6 100.1L353.1 100.0L354.6 99.8L356.1 99.4L357.6 99.0L359.2 98.4L360.6 97.8L362.1 97.1L363.5 96.3L364.9 95.4L366.2 94.5L367.5 93.5L368.7 92.4L369.9 91.2L371 90.0L372 88.7L372.9 87.4L373.8 86.0L374.6 84.6L375.2 83.2L262 83.2L273.7 17.2L386.9 17.2L386.7 15.8L386.4 14.4L386 13.0L385.6 11.7L385 10.4L384.3 9.2L383.6 8.0L382.7 6.9L381.8 5.9L380.8 4.9L379.8 4.1L378.6 3.3L377.4 2.6L376.2 1.9L374.9 1.4L373.5 1.0L372.1 0.6L370.6 0.4L369.2 0.2L367.7 0.2L269.7 0.2L268.1 0.2L266.5 0.4L264.9 0.7ZM420.2 83.9L420.5 85.4L420.9 86.8L421.4 88.2L422 89.5L422.7 90.8L423.4 92.0L424.3 93.2L425.3 94.2L426.3 95.2L427.4 96.2L428.6 97.0L429.9 97.7L431.2 98.4L432.5 98.9L434 99.4L435.4 99.7L436.9 100.0L438.5 100.1L440 100.2L537 100.2L538.6 100.1L540.2 100.0L541.8 99.7L543.4 99.4L545 98.9L546.5 98.4L548.1 97.7L549.6 97.0L551.1 96.2L552.5 95.2L553.9 94.2L555.2 93.2L556.5 92.0L557.7 90.8L558.9 89.5L559.9 88.2L560.9 86.8L561.8 85.4L562.6 83.9L563.4 82.4L564 80.9L564.5 79.3L564.9 77.8L565.3 76.2L573.2 31.2L573.5 29.2L573.7 27.1L573.7 25.1L573.6 23.2L573.3 21.2L572.9 19.3L572.4 17.5L571.8 15.7L571 14.0L570.1 12.3L569.1 10.8L568 9.3L566.8 7.9L565.4 6.6L564 5.4L562.4 4.3L560.8 3.4L559.1 2.6L557.3 1.8L555.5 1.3L553.6 0.8L551.7 0.5L549.7 0.3L547.7 0.2L533 83.2L450 83.2L464.7 0.2L462.6 0.3L460.6 0.5L458.5 0.8L456.5 1.3L454.4 1.8L452.4 2.6L450.4 3.4L448.4 4.3L446.5 5.4L444.7 6.6L442.9 7.9L441.2 9.3L439.5 10.8L437.9 12.3L436.5 14.0L435.1 15.7L433.8 17.5L432.7 19.3L431.6 21.2L430.7 23.2L429.9 25.1L429.2 27.1L428.6 29.2L428.2 31.2L420.3 76.2L420 77.8L419.9 79.3L419.9 80.9L420 82.4ZM736.2 17.5L736.8 17.7L737.3 18.0L737.8 18.4L738 18.7L738.3 19.2L738.6 19.7L738.8 20.3L738.9 20.9L738.9 21.5L738.8 22.2L735.8 38.9L735.7 39.6L735.6 39.9L735.3 40.6L734.7 41.4L734.3 42.0L733.5 42.7L732.9 43.1L731.9 43.6L731.3 43.8L731 43.8L730.3 43.9L730 43.9L616 43.9L606 100.2L637 100.2L643.7 62.7L694.9 62.7L716 100.2L751 100.2L729.9 62.7L735.7 62.7L737.1 62.6L738.6 62.5L740 62.3L741.5 61.9L742.9 61.5L744.4 61.0L745.8 60.4L747.2 59.7L748.5 59.0L749.8 58.1L751.1 57.2L752.3 56.3L753.5 55.2L754.6 54.1L755.7 52.9L756.6 51.7L757.5 50.4L758.4 49.1L759.1 47.8L759.8 46.4L760.4 45.0L760.8 43.6L761.2 42.1L761.5 40.7L763.9 27.2L764.2 25.4L764.3 23.7L764.3 21.9L764.2 20.2L764 18.5L763.7 16.9L763.2 15.3L762.7 13.7L762 12.2L761.2 10.8L760.4 9.4L759.4 8.1L758.3 6.9L757.1 5.8L755.9 4.7L754.5 3.8L753.1 3.0L751.6 2.3L750.1 1.6L748.5 1.1L746.8 0.7L745.2 0.4L743.4 0.3L741.7 0.2L623.7 0.2L620.7 17.2L734.7 17.2L735.3 17.2L735.6 17.3ZM953.3 12.2L952.7 10.9L952.1 9.6L951.3 8.4L950.4 7.2L949.4 6.2L948.4 5.2L947.3 4.2L946.1 3.4L944.9 2.7L943.5 2.0L942.2 1.5L940.7 1.0L939.3 0.7L937.8 0.4L936.2 0.2L934.7 0.2L832.7 0.2L831.1 0.2L829.5 0.4L827.9 0.7L826.3 1.0L824.7 1.5L823.2 2.0L821.6 2.7L820.1 3.4L818.6 4.2L817.2 5.2L815.8 6.2L814.5 7.2L813.2 8.4L812 9.6L810.8 10.9L809.8 12.2L808.8 13.6L807.9 15.0L807.1 16.5L806.4 18.0L805.7 19.5L805.2 21.1L804.8 22.6L804.4 24.2L795.3 76.2L795 77.8L794.9 79.3L794.9 80.9L795 82.4L795.2 83.9L795.5 85.4L795.9 86.8L796.4 88.2L797 89.5L797.7 90.8L798.4 92.0L799.3 93.2L800.3 94.2L801.3 95.2L802.4 96.2L803.6 97.0L804.9 97.7L806.2 98.4L807.5 98.9L809 99.4L810.4 99.7L811.9 100.0L813.5 100.1L815 100.2L917 100.2L918.6 100.1L920.2 100.0L921.8 99.7L923.4 99.4L925 98.9L926.5 98.4L928.1 97.7L929.6 97.0L931.1 96.2L932.5 95.2L933.9 94.2L935.2 93.2L936.5 92.0L937.7 90.8L938.9 89.5L939.9 88.2L940.9 86.8L941.8 85.4L942.6 83.9L943.4 82.4L944 80.9L944.5 79.3L944.9 77.8L945.3 76.2L954.4 24.2L954.7 22.6L954.8 21.1L954.8 19.5L954.7 18.0L954.5 16.5L954.2 15.0L953.8 13.6ZM836.3 20.6L836.7 20.0L837.4 19.2L837.9 18.7L838.4 18.2L839.4 17.7L840 17.5L840.7 17.3L841 17.2L841.7 17.2L919.7 17.2L920.3 17.2L920.9 17.4L921.5 17.6L922.1 17.9L922.3 18.0L922.8 18.4L923 18.7L923.3 19.2L923.6 19.7L923.8 20.3L923.9 20.9L923.9 21.5L923.8 22.2L913.9 78.2L913.8 78.8L913.5 79.5L913.2 80.1L912.8 80.7L912.3 81.2L911.8 81.7L911.3 82.2L910.7 82.5L910 82.8L909.4 83.0L908.7 83.2L908 83.2L830 83.2L829.7 83.2L829.1 83.1L828.5 82.9L827.9 82.7L827.4 82.4L827 82.0L826.6 81.5L826.3 81.0L826 80.4L825.9 79.8L825.8 79.2L825.9 78.5L825.9 78.2L835.8 22.2L836 21.5L836.1 21.2ZM1016.6 2.7L1015.1 3.4L1013.6 4.2L1012.2 5.2L1010.8 6.2L1009.5 7.2L1008.2 8.4L1007 9.6L1005.8 10.9L1004.8 12.2L1003.8 13.6L1002.9 15.0L1002.1 16.5L1001.4 18.0L1000.7 19.5L1000.2 21.1L999.8 22.6L999.4 24.2L996.1 42.9L996 44.0L995.9 45.0L995.9 46.1L995.9 47.1L996.1 48.1L996.3 49.1L996.5 50.0L996.9 50.9L997.3 51.8L997.7 52.7L998.2 53.5L998.8 54.3L999.5 55.0L1000.2 55.6L1000.9 56.2L1001.7 56.8L1002.5 57.3L1003.4 57.7L1004.3 58.1L1005.3 58.4L1006.2 58.6L1007.2 58.8L1008.3 58.9L1009.3 58.9L1112.3 58.9L1108 83.2L989.8 83.2L990 84.6L990.3 86.0L990.7 87.4L991.1 88.7L991.7 90.0L992.4 91.2L993.1 92.4L994 93.5L994.9 94.5L995.9 95.4L996.9 96.3L998.1 97.1L999.3 97.8L1000.5 98.4L1001.9 99.0L1003.2 99.4L1004.6 99.8L1006.1 100.0L1007.5 100.1L1009 100.2L1108 100.2L1109.6 100.1L1111.1 100.0L1112.6 99.8L1114.1 99.4L1115.6 99.0L1117.2 98.4L1118.6 97.8L1120.1 97.1L1121.5 96.3L1122.9 95.4L1124.2 94.5L1125.5 93.5L1126.7 92.4L1127.9 91.2L1129 90.0L1130 88.7L1130.9 87.4L1131.8 86.0L1132.6 84.6L1133.3 83.1L1133.9 81.7L1134.4 80.2L1134.8 78.7L1135.1 77.2L1138.8 55.9L1139 54.8L1139.1 53.7L1139.1 52.6L1139 51.5L1138.9 50.5L1138.7 49.4L1138.4 48.4L1138.1 47.4L1137.6 46.5L1137.2 45.6L1136.6 44.7L1136 43.9L1135.3 43.2L1134.6 42.5L1133.8 41.8L1132.9 41.2L1132 40.7L1131.1 40.2L1130.1 39.8L1129.1 39.5L1128.1 39.3L1127 39.1L1125.9 39.0L1124.8 38.9L1024.8 38.9L1028.7 17.2L1144.9 17.2L1144.7 15.8L1144.4 14.4L1144 13.0L1143.6 11.7L1143 10.4L1142.3 9.2L1141.6 8.0L1140.7 6.9L1139.8 5.9L1138.8 4.9L1137.8 4.1L1136.6 3.3L1135.4 2.6L1134.2 1.9L1132.9 1.4L1131.5 1.0L1130.1 0.6L1128.6 0.4L1127.2 0.2L1125.7 0.2L1027.7 0.2L1026.1 0.2L1024.5 0.4L1022.9 0.7L1021.3 1.0L1019.7 1.5L1018.2 2.0ZM113.1 50.2L108.4 53.2L102.2 57.3L97.6 60.4L92.1 64.3L140.5 100.2L188 100.2L117.2 47.7Z%22/%3E%3C/svg%3E"); --r-sm:14px; --r:22px; --r-lg:28px; --pill:999px; --pad:clamp(20px,6vw,150px); --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.2,.8,.2,1); --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --display:"Michroma","Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,sans-serif; /* the name, only */ --head:"Sora","Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,sans-serif; /* every headline */ --font-ar:"Almarai","Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",Arial,sans-serif; --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace; --nav-h:64px; /* THE BAR'S HEIGHT AND WHERE THE PAGE STARTS ARE TWO NUMBERS. --nav-h is the chrome itself and is what the lockup and the links are centred in; --nav-top is that plus whatever the phone reserves at the top of the screen. `viewport-fit=cover` hands us the whole display, and an installed app on Android 15 takes it literally: the clock is drawn on our own first 40 pixels. Everything anchored to the top measures from --nav-top. On a desktop the inset is 0 and the two are the same number. */ --nav-top:calc(var(--nav-h) + env(safe-area-inset-top)); } [data-theme="light"]{ --bg:#f7f8fa; --bg-2:#eef0f4; --surface:#ffffff; --surface-2:#f1f2f6; --elev:#ffffff; --border:rgba(10,12,24,.10); --border-2:rgba(10,12,24,.18); --text:#0b0d16; --muted:#555b70; --faint:#6e7489; --accent:#0369a1; --accent-2:#6d28d9; --accent-3:#0284c7; --brand:#ea580c; --ok:#0ea371; --warn:#d97706; --danger:#e5484d; --ok-ink:#047857; --warn-ink:#b45309; --danger-ink:#b91c1c; --glass:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.55)); --glass-2:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7)); --glass-line:rgba(10,12,24,.10); --glass-hi:rgba(255,255,255,.9); --cta:#0b0d16; --cta-ink:#ffffff; --glow-a:rgba(56,189,248,.28); --glow-b:rgba(139,92,246,.22); --shadow:0 24px 60px -34px rgba(20,24,50,.35); } /* ── base ───────────────────────────────────────────────────────────────────────────────── */ *{box-sizing:border-box} /* background on as well as on body: under a transparent status bar the strip is painted by the CANVAS, and the canvas only borrows body's background while html has none of its own. Stated twice, so a phone cannot find a surface we did not colour. */ html{overflow-x:clip; color-scheme:dark; background:var(--bg); scroll-behavior:smooth; -webkit-text-size-adjust:100%} [data-theme="light"]{color-scheme:light} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{position:relative; margin:0; font-family:var(--font); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6; letter-spacing:-.005em; overflow-x:clip; min-height:100dvh} a{color:inherit; text-decoration:none} img,svg{max-width:100%} button{font-family:inherit} ::selection{background:color-mix(in srgb,var(--accent) 32%,transparent)} :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px} .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .grid>*,.cmp-body>*,.doc-layout>*,.foot-grid>*,.specs>*,.two>*,.how>*,.caps>*,.figs>*,.priv>*,.starts>*{min-width:0} /* EDGE TO EDGE — but not up against the glass. No centred column and no maximum width: the bar, the hero and every section run the full width of the window, held off its edges by ONE margin that grows with the window (~23px on a phone, ~77 at 1280, ~115 at 1920, 150 at the cap). What keeps long text readable at those widths is a max-width in CHARACTERS on the paragraph itself, never a box drawn round the page. */ .wrap{padding:0 var(--pad)} .shell{position:relative; z-index:1} .band{padding-block:clamp(60px,9vw,124px)} .band.tight{padding-block-start:clamp(34px,5vw,60px)} /* the last band already has the footer's own top padding under it; two full section gaps stacked read as a hole rather than a break */ .page > :last-child{padding-block-end:clamp(26px,3vw,48px)} main{padding-top:var(--nav-top)} /* ── glass ──────────────────────────────────────────────────────────────────────────────── */ .glass{position:relative; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r); box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow)} /* the shine: a conic light that runs around the border, a full turn, so it never jumps */ /* ── type ───────────────────────────────────────────────────────────────────────────────── */ h1,h2,h3,h4{margin:0; line-height:1.15} h1,h2{font-family:var(--head); font-weight:700; letter-spacing:-.035em} h3{font-family:var(--head); font-size:17px; font-weight:650; letter-spacing:-.02em} h1.display{font-size:clamp(21px,2.2vw,25px); font-weight:560; line-height:1.22; letter-spacing:-.022em; margin-top:0; text-wrap:balance} h1.sec,h2.sec{font-size:clamp(26px,3.2vw,42px); line-height:1.12; margin-top:16px; text-wrap:balance} /* A SECTION'S LABEL IS A WORD IN THE ACCENT COLOUR, AND NOTHING ELSE. It was a glass pill with a breathing dot and a two-digit number in monospace: three ornaments that each said "a template made this", and numbers that counted nothing — the home page's 01–04 and the other pages' 01–06 were two different counts wearing one face. */ .eyebrow{display:inline-block; font-size:13.5px; font-weight:600; letter-spacing:.005em; line-height:1.4; color:var(--accent)} .eyebrow b{font-weight:inherit; color:inherit} .sec-sub{margin:18px 0 0; color:var(--muted); font-size:clamp(15px,1.9vw,17px); max-width:60ch; line-height:1.68} /* Still. The colour sliding back and forth through the words was a light show on a sentence. */ .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent} .sec-head{margin-bottom:clamp(30px,4.5vw,54px)} .sec-head.split{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(20px,4vw,48px); align-items:end} @media (max-width:900px){ .sec-head.split{grid-template-columns:1fr} } .mn{white-space:nowrap} .brk::before{content:"\00a0"} @media (max-width:820px){ .brk::before{content:"-"} } code{font-family:var(--mono); font-size:.92em} p code,li code,dd code,.sec-sub code{padding:2px 6px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:.86em} .label{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)} /* ── scroll progress ────────────────────────────────────────────────────────────────────── */ .progress{position:fixed; top:0; inset-inline-start:0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--grad); z-index:70; pointer-events:none; opacity:.9} [dir="rtl"] .progress{transform-origin:100% 50%} @supports (animation-timeline:scroll()){ .progress{animation:grow linear both; animation-timeline:scroll(root)} @keyframes grow{to{transform:scaleX(1)}} } @media (prefers-reduced-motion:reduce){ .progress{display:none} } /* ── the strip: the pages live in the top bar, uppercase and tracked, one line ────────── Transparent over the top of the page, glass once the page has moved under it (.stuck). Below 980px the links fold into the full-screen menu behind the burger. ─────────────── */ .nav{position:fixed; top:0; inset-inline:0; z-index:60; height:var(--nav-top); padding-top:env(safe-area-inset-top); border-bottom:1px solid transparent; transition:background .35s var(--ease), border-color .35s var(--ease)} .nav::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s var(--ease); background:color-mix(in srgb,var(--bg) 74%,transparent); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%)} /* The bar's blur is worked again for every frame anything moves. Over the stars it blurs black, so it rests. */ html:has(.co-pin.play) .nav::before,.lite .nav::before{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg)} .nav.stuck{border-bottom-color:var(--glass-line)} .nav.stuck::before,html.menu-open .nav::before{opacity:1} .nav-in{height:100%; display:flex; align-items:center; gap:10px} /* ── THE TOP STRIP DOES NOT MOVE BETWEEN LANGUAGES ────────────────────────────────────────── A standing call, and the right one: this bar is CHROME, not content. The mark belongs where the mark lives and the actions where the actions live, and a reader who switches language should not have to hunt for the theme button because the sentence below it changed direction. So the ORDER of the items is pinned; the LABELS inside are still Arabic and still shaped right-to-left, because direction on a box does not change how the text inside it is written. Everything below the bar — the page, the menu it opens — still mirrors. The three lines under it undo the RTL flips that now point the wrong way inside an LTR bar. */ [dir="rtl"] .nav-in{direction:ltr} [dir="rtl"] .nav-in .btn .arr{transform:none} [dir="rtl"] .nav-in .btn:hover .arr{transform:translateX(3px)} [dir="rtl"] .nav-in .links a::after{transform-origin:0 50%} .brand{display:flex; align-items:center; gap:11px; min-width:0; flex:0 0 auto; padding:4px 0} /* The name is the logo: the wordmark alone, no icon beside it, no word written after it. 12px tall, at every width and on every page, the footer too: the size of SpaceX's own wordmark on spacex.com (letters 11.5px tall, 138px of ink, measured 2026-11-09) — Ahmed: "same size as theirs", in the Playground as well (.side-brand there). */ .wordmark{display:block; height:12px; aspect-ratio:1144.9/100.2; flex:0 0 auto; background:currentColor; -webkit-mask:var(--wm) center/contain no-repeat; mask:var(--wm) center/contain no-repeat} .brand{color:var(--text)} .links{display:flex; align-items:center; gap:2px; margin-inline-start:clamp(14px,3vw,40px); height:100%} /* The bar stays left to right in Arabic; each label inside it is still read right to left, or "مفتاح API مجاني" comes out as "مجاني API مفتاح". */ [dir="rtl"] .links a,[dir="rtl"] .menu-links a{direction:rtl} .links a{position:relative; display:inline-flex; align-items:center; height:100%; padding:0 13px; font-size:13.5px; font-weight:500; letter-spacing:-.005em; color:var(--muted); white-space:nowrap; transition:color .2s var(--ease)} .links a::after{content:""; position:absolute; inset-inline:13px; bottom:18px; height:1px; background:var(--text); transform:scaleX(0); transform-origin:0 50%; transition:transform .3s var(--spring)} [dir="rtl"] .links a::after{transform-origin:100% 50%} .links a:hover{color:var(--text)} .links a.on{color:var(--text)} .links a.on::after{transform:scaleX(1)} .grow{flex:1} .icon{width:38px; height:38px; display:grid; place-items:center; border-radius:var(--pill); cursor:pointer; border:1px solid transparent; background:transparent; color:var(--muted); transition:.18s var(--ease); flex:0 0 auto} .icon:hover{color:var(--text); border-color:var(--glass-line); background:var(--glass)} .icon svg{width:17px; height:17px} .icon .sun{display:none} .icon .moon{display:block} [data-theme="light"] .icon .sun{display:block} [data-theme="light"] .icon .moon{display:none} .langbtn{height:38px; padding:0 13px; border-radius:var(--pill); cursor:pointer; font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:.08em; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border:1px solid var(--glass-line); background:transparent; color:var(--muted); transition:.18s var(--ease); flex:0 0 auto} .langbtn:hover{color:var(--text); border-color:var(--border-2); background:var(--glass)} .langbtn span{display:block; padding-inline-start:.08em} /* the burger: two bars that become a cross */ .nav .burger{display:none} .burger svg{width:20px; height:20px} .burger path{transition:transform .32s var(--spring); transform-origin:12px 12px} html.menu-open .burger .b1{transform:translateY(4px) rotate(45deg)} html.menu-open .burger .b2{transform:translateY(-4px) rotate(-45deg)} /* the menu: the same six pages, full-screen, numbered, in the display face */ .menu{position:fixed; inset:var(--nav-top) 0 0 0; z-index:59; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:clamp(18px,4vh,40px) clamp(20px,6vw,40px) max(22px,env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; overflow:auto} html.menu-open .menu{opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s} html.menu-open body{overflow:hidden} .menu-links{display:flex; flex-direction:column} .menu-links a{display:flex; align-items:baseline; gap:18px; padding:clamp(12px,2.4vh,18px) 0; border-bottom:1px solid var(--glass-line); font-size:clamp(24px,7vw,34px); font-weight:700; letter-spacing:-.025em; color:var(--muted); opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease), transform .4s var(--spring), color .2s var(--ease)} .menu-links a.on,.menu-links a:hover{color:var(--text)} html.menu-open .menu-links a{opacity:1; transform:none} html.menu-open .menu-links a:nth-child(2){transition-delay:.05s} html.menu-open .menu-links a:nth-child(3){transition-delay:.1s} html.menu-open .menu-links a:nth-child(4){transition-delay:.15s} html.menu-open .menu-links a:nth-child(5){transition-delay:.2s} html.menu-open .menu-links a:nth-child(6){transition-delay:.25s} html.menu-open .menu-links a:nth-child(7){transition-delay:.3s} .menu-ctas{display:grid; gap:10px} .menu-ctas .btn{width:100%; padding-block:15px} .cta-short{display:none} @media (max-width:979px){ .links{display:none} .nav .burger{display:grid} .nav .cta-nav{padding:9px 14px} .nav .cta-nav .arr,.cta-long{display:none} .cta-short{display:inline} } /* a finger is wider than a pointer: every control in the bar is at least 44px to touch */ @media (pointer:coarse){ .icon,.langbtn{height:44px; min-width:44px} .nav .cta-nav{min-height:40px} } @media (min-width:980px){ .menu{display:none} } @media (max-width:400px){ .langbtn{padding:0 10px} } /* ── buttons ────────────────────────────────────────────────────────────────────────────── */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; white-space:nowrap; font-size:14px; font-weight:600; letter-spacing:-.005em; padding:13px 22px; border-radius:var(--pill); border:1px solid transparent; transition:transform .2s var(--spring), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease)} .btn svg{width:14px; height:14px; flex:0 0 auto} .btn:active{transform:translateY(0) scale(.985)} /* No coloured glow under the button: a glowing call to action is the stock template move, and in the light theme it hung a blue halo under a black pill. */ .btn-primary{background:var(--cta); color:var(--cta-ink); border-color:var(--cta)} .btn-primary:hover{background:color-mix(in srgb,var(--cta) 88%,var(--bg)); border-color:color-mix(in srgb,var(--cta) 88%,var(--bg))} .btn-line{background:transparent; border-color:color-mix(in srgb,var(--text) 55%,transparent); color:var(--text)} .btn-line:hover{border-color:var(--text); background:color-mix(in srgb,var(--text) 6%,transparent); transform:translateY(-1px)} .btn-ghost{background:var(--glass); border-color:var(--glass-line); color:var(--text); box-shadow:inset 0 1px 0 var(--glass-hi)} .btn-ghost:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--glass-line)); background:var(--glass-2); transform:translateY(-1px)} .btn-sm{padding:10px 16px; font-size:13px} .btn .arr{transition:transform .22s var(--spring)} .btn:hover .arr{transform:translateX(3px)} [dir="rtl"] .btn .arr{transform:scaleX(-1)} /* The same for the bare "→" that follows a handful of text links. It was landing at the correct END of the Arabic line and still pointing right — back into the sentence it leads out of. */ .arr-t{display:inline-block; font-style:normal} [dir="rtl"] .arr-t{transform:scaleX(-1)} [dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)} /* ── hero: the sentence on the start side, a world on the end side ─────────────────────── */ /* ── the first screen is dark in BOTH themes ──────────────────────────────────────────── Decided 2026-09-12: the opening block — the planet and the stars, the name, the sentence and the paragraph under them — never turns white; the light theme starts below it. The ball is drawn for a black sky (its glow, its terminator, the stars and the meteor are all lit against one), so the fix is an ISLAND of the dark palette rather than a second planet for the light theme. It works by re-declaring the dark tokens on the block: every child inside resolves the dark system on its own and not one of them needs a light-theme rule. The splash is in the island too — it is the same first screen, and a white one would flash before a black hero. The top strip joins the island while the hero is under it (.on-dark, from the hero's own observer in app.js) and rejoins the page when light content scrolls beneath it. */ [data-theme="light"] .hero, [data-theme="light"] .co-hero, [data-theme="light"] .co-story, [data-theme="light"] .mq-wrap, [data-theme="light"] .splash, [data-theme="light"] .nav.on-dark{ --bg:#000000; --bg-2:#07080c; --surface:#0b0c11; --surface-2:#13151c; --elev:#181a22; --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.17); --text:#eef0f6; --muted:#9ba1b4; --faint:#7c8199; --accent:#7dd3fc; --accent-2:#a78bfa; --accent-3:#38bdf8; --ok:#34d399; --ok-ink:var(--ok); --glass:linear-gradient(168deg,rgba(126,178,255,.10),rgba(120,170,255,.028) 58%,rgba(255,255,255,.018)); --glass-2:linear-gradient(168deg,rgba(140,190,255,.155),rgba(120,170,255,.05)); --glass-line:rgba(152,196,255,.155); --glass-hi:rgba(190,220,255,.18); --cta:#ffffff; --cta-ink:#080a10; --glow-a:rgba(56,189,248,.36); --glow-b:rgba(139,92,246,.30); --shadow:0 30px 80px -40px rgba(0,0,0,.8); color:var(--text)} [data-theme="light"] .hero,[data-theme="light"] .co-hero,[data-theme="light"] .co-story,[data-theme="light"] .mq-wrap{background:var(--bg)} /* The bar sits ABOVE the hero's box (main reserves its height), so the strip has to be painted here or a white band is left sitting over black. Opaque, not glass: it is one surface with the hero under it, and it fades back to the page's own bar on the way out. */ [data-theme="light"] .nav.on-dark{background:#000000; border-bottom-color:transparent} [data-theme="light"] .nav.on-dark::before{opacity:0} .hero{position:relative; padding-block:clamp(40px,7vw,96px) clamp(30px,5vw,60px); min-height:min(calc(100svh - var(--nav-h)),900px); display:flex; align-items:center; overflow:hidden} .hero-grid{position:relative; z-index:2; width:100%} /* The sky: under the planet (z 1) and the words (z 2). One fade, run forwards on half the stars and backwards on the other half, so the two halves take turns (initSky in app.js). */ .sky{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:hidden} .sky circle{fill:#ffffff} .sky>svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible} .sky>svg{will-change:opacity; animation:twinkle 3.2s ease-in-out infinite alternate} .sky .tw-b{animation-direction:alternate-reverse} .hero:not(.play) .sky>svg{animation-play-state:paused} @keyframes twinkle{from{opacity:1} to{opacity:.14}} /* The meteor (meteors() in app.js): a tail that brightens into a round head at its right end, which the script turns to face the way it falls and moves until it has left the hero. Its pivot is the head, so the transform places the head exactly where the flight says it is. */ .meteor{position:absolute; left:0; top:0; height:2px; z-index:0; opacity:0; pointer-events:none; transform-origin:100% 50%; border-radius:2px; will-change:transform,opacity; background:linear-gradient(90deg,rgba(224,240,255,0),rgba(224,240,255,.16) 35%,rgba(234,246,255,.95)); filter:drop-shadow(0 0 4px rgba(200,228,255,.55))} .meteor::after{content:""; position:absolute; right:-1.5px; top:-1px; width:4px; height:4px; border-radius:50%; background:#f4faff; box-shadow:0 0 8px 2px rgba(210,234,255,.7)} @media (prefers-reduced-motion:reduce){ .sky>svg{animation:none; opacity:.8} } .hero-copy{max-width:min(680px,50%); text-align:start} /* THE NAME, at last given its size. Michroma is the face the product's name is always set in, and this is the one place on the site where it is set big: the reader should be able to say what they are looking at from across the room. The version rides on the baseline beside it in the mono, and the tag is the only thing here that translates. */ /* A column, so the tag has a line of its own whatever the window is doing: stretching is what would have made it a full-width pill, and `align-items` is what stops that AND is what carries the alignment — start beside the text on a desktop, centre when the hero stacks. */ .mline{display:flex; flex-direction:column; gap:10px; margin-bottom:clamp(14px,1.6vw,22px)} .mrow{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px} /* The name is a Latin proper noun and it NEVER mirrors: these are flex items, not inline text, so the bidi algorithm has no say and an RTL row would lay the tier out first — "MAX XCurOS 2.2". The row is forced to ltr and then pushed back to the start edge by hand. */ [dir="rtl"] .mrow{direction:ltr; justify-content:flex-end} /* Michroma ships ONE weight, so there is no bolder cut to ask for: the stroke is how a single-weight face is thickened without distorting it (a transform would, and a shadow would blur). */ .mname{font-family:var(--display); font-size:clamp(22px,3.3vw,48px); letter-spacing:.08em; text-transform:uppercase; line-height:1.12; color:var(--text); white-space:nowrap; -webkit-text-stroke:.9px currentColor} /* "Max" is part of the name, not a footnote to it: same face, four fifths the size, and the accent gradient so the tier is the thing the eye lands on after the number. */ .mver{font-family:var(--display); font-size:clamp(18px,2.65vw,38px); letter-spacing:.08em; text-transform:uppercase; line-height:1.12; white-space:nowrap; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:.9px color-mix(in srgb,var(--accent) 80%,var(--accent-2))} [lang="ar"] .mname{font-family:var(--display)} /* the name never changes face */ .hero .lead{margin:18px 0 0; color:var(--muted); font-size:clamp(14.6px,1.5vw,16.6px); max-width:56ch; line-height:1.72} .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px} .trust{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:28px; color:var(--faint); font-size:13px} .trust span{display:inline-flex; align-items:center; gap:7px} .trust svg{width:14px; height:14px; color:var(--ok)} /* the cue at the foot of the hero: a label and a chevron that breathes (symmetric, seamless) */ .cue{position:absolute; bottom:22px; inset-inline-start:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)} [dir="rtl"] .cue{transform:translateX(50%)} .cue svg{width:14px; height:14px; animation:cue 2.2s ease-in-out infinite} @keyframes cue{0%,100%{transform:translateY(0); opacity:.5} 50%{transform:translateY(6px); opacity:1}} [lang="ar"] .cue{font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:12px} @media (max-width:900px){ .cue{display:none} } /* ── the world ────────────────────────────────────────────────────────────────────────────── The canvas is the planet: initPlanet in app.js draws a lit ball wearing the map in vendor/planet-2.webp (tools/planet.py). Under it sits the same planet in CSS — the map, flat, sliding exactly one tile under a shaded disc — which is what shows until the GPU's first frame, and what stays where WebGL is not available (.flat). The ball is 72% of the canvas on both, so the swap moves nothing. ──────────────────────────────────────────── */ .world{position:absolute; inset-block:0; inset-inline-end:0; width:54%; display:grid; place-items:center end; z-index:1} .space{position:relative; width:min(100%,900px); aspect-ratio:1} /* pointer-events:none because it is a PICTURE, not a control: nothing is bound to it but webglcontextlost, and Chrome offers "Save image as…" on any canvas — which is the whole right half of the hero answering a right-click with a download nobody asked for. */ .planet-gl{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; pointer-events:none; transition:opacity .9s var(--ease)} .world.gl .planet-gl{opacity:1} .world.flat .planet-gl,.world.sw .planet-gl{display:none} /* The CPU's planet (Soft in app.js): two canvases, the atmosphere and the moving ball, drawn while the GPU is away or where there is none. They are created the first time they are needed, so a visitor whose GPU never fails never has them. */ .planet-sw{position:absolute; inset:0; width:100%; height:100%; display:none; pointer-events:none} .world.sw .planet-sw{display:block} .planet{position:absolute; inset:14%; border-radius:50%; overflow:hidden; isolation:isolate; transform:translateZ(0); background:#1a4fb0; transition:opacity .9s var(--ease); box-shadow:0 0 0 1px rgba(160,220,255,.14), 0 0 70px 6px rgba(66,140,255,.18), 0 40px 90px -30px rgba(0,0,0,.9)} .world.gl .planet,.world.sw .planet{opacity:0; visibility:hidden; transition:opacity .9s var(--ease), visibility 0s .9s} .world.gl .cl::before,.world.sw .cl::before{animation-play-state:paused} /* under the canvas nobody sees it turn */ .planet>i{position:absolute; inset:0; display:block} /* The same lean as the shader's, and the same direction of travel: the layer is rotated, so the strip slides ALONG the bands rather than across them. A strip 2 diameters wide, turned 20 degrees, still covers the disc as long as it is at least one diameter tall — 116% leaves a margin for rounding without stretching the map. THE SIGN WAS WRONG, AND THE SENTENCE ABOVE IS WHY NOBODY CAUGHT IT — it asserted the match instead of checking it. `revolve` translates +X, so a feature travels in +X turned by this angle, and CSS angles go CLOCKWISE: rotate(-20deg) sent it UP and to the right. The shader's bands run DOWN to the right (COSA/SINA = 0.9397/-0.3420, and the disc turns left to right along them), so the fallback was the planet spinning backwards — which is exactly what it looks like when the GPU drops the context and this layer comes up underneath: same map, same 45 s, mirrored lean. rotate(20deg) puts a +X step at dy=+0.342 against the shader's 0.3420. */ .cl{transform:rotate(20deg)} /* The picture is named only under .flat — the state where WebGL is actually missing. A browser fetches a background-image the moment the rule matches, so naming it here instead of on the base rule is the difference between every visitor paying for a map they will never see and only the ones who need it paying. Before the first GL frame the disc is the flat blue below plus its shading, which is a poster, not a placeholder. */ .cl::before{content:""; position:absolute; inset:-8% auto -8% -100%; width:200%; background-size:50% 100%; background-repeat:repeat-x; will-change:transform; animation:revolve 45s linear infinite} .world.flat .cl::before{background-image:url(/vendor/planet-2-sm.webp)} @keyframes revolve{to{transform:translateX(50%)}} /* one tile, left to right — one seam-free turn */ .planet .shade{background: radial-gradient(circle at 30% 26%,rgba(255,255,255,.22),rgba(255,255,255,0) 34%), radial-gradient(circle at 34% 30%,transparent 42%,rgba(3,8,22,.35) 62%,rgba(2,6,16,.9) 88%,rgba(1,4,12,.98) 100%); box-shadow:inset 0 0 44px rgba(125,211,252,.28), inset -26px -22px 70px rgba(2,6,16,.75)} @media (max-width:900px){ .hero{min-height:0; padding-block:clamp(10px,3vw,24px) 0; flex-direction:column} .hero-copy{max-width:none; text-align:center; margin:0 auto} .mrow,[dir="rtl"] .mrow{justify-content:center} .hero .lead{margin-inline:auto} .hero-cta,.trust{justify-content:center} .world{position:relative; inset:auto; width:100%; margin:0 auto 8px; z-index:0; place-items:center} .space{width:min(82vw,400px)} .hero-grid{order:2} } @media (max-width:560px){ .hero-cta{flex-direction:column; align-items:stretch} .hero-cta .btn{width:100%} } @media (prefers-reduced-motion:reduce){ .cl::before,.cue svg{animation:none} } /* ── the marquee: two identical halves in one track, moved by exactly one half. The seam is where the second half meets the first — the same pixels — so the loop cannot show. ─── */ /* The band: a caption, then the strip. The caption is the difference between a list of names and a claim about who our customers are, so it is not decorative and not aria-hidden. */ /* The gap above the band is the WRAPPER's padding, not the band's margin: in the light theme the wrapper is the dark block's last piece, and a margin would have left a white gutter between the hero and it. The wrapper also carries the paint because .mq-band fades in (.rv) — a background on a box whose opacity animates would rise out of the page's white. */ .mq-wrap{padding-top:clamp(30px,4.4vw,52px)} .mq-cap{margin:0 0 13px; text-align:center; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding-inline:var(--pad)} [lang="ar"] .mq-cap{font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:12.5px; font-weight:700} .marquee{position:relative; overflow:hidden; direction:ltr; padding:14px 0; border-top:1px solid var(--glass-line); border-bottom:1px solid var(--glass-line); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .mq-track{display:flex; width:max-content; animation:marquee 46s linear infinite} .marquee:hover .mq-track,.marquee:not(.play) .mq-track{animation-play-state:paused} .mq-half{display:flex; align-items:center; gap:0; padding-inline-end:0; flex:0 0 auto} .mq-half span{display:inline-flex; align-items:center; gap:18px; font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--muted); padding:0 18px; white-space:nowrap} /* the names carry the weight; the capabilities sit behind them */ .mq-half span.nm{color:var(--text); font-size:14px; font-weight:680; letter-spacing:-.005em} .mq-half span::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.8; flex:0 0 auto} /* Each tool wears its own mark here too (API_LOGOS, filled in by markTools) — the dots between the names went with it. The mark is decoration: the name beside it is the text. */ .mq-half span.nm{gap:10px; padding:0 22px} .mq-half span.nm::after{display:none} .mq-ic{display:inline-grid; place-items:center; width:18px; height:18px; flex:0 0 auto; color:var(--text); font-style:normal} .mq-ic svg{width:100%; height:100%; display:block} .mq-go{margin:16px 0 0; text-align:center; font-size:14px; font-weight:600; padding-inline:var(--pad)} .mq-go a{color:var(--accent); display:inline-flex; align-items:center; gap:6px; padding:8px 4px} .mq-go a:hover{color:var(--text)} @keyframes marquee{to{transform:translateX(-50%)}} [lang="ar"] .mq-half span{font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:13px; font-weight:700} @media (prefers-reduced-motion:reduce){ .mq-track{animation:none} } /* ── the live counters, under a map of where they came from ────────────────────────────── ONE BAND, NOT TWO TILES. The two numbers are two readings of one thing — openings, and the people who did the opening — and the map above them is a third reading of the same thirty days. Sitting them in separate cards made three separate claims out of one measurement. AND THE FIGURES ARE BESIDE THE MAP, NOT ON IT. They were pinned to its bottom corners for one revision, over a wash dense enough to read a caption against a coastline — which is a wash dense enough to take Australia, New Zealand, Chile and South Africa off a map of where people came from. A number is easiest to read on a surface; a map is easiest to read with nothing on it. So the map keeps its own area and the figures sit under it, across a hairline. THE PANEL DOES NOT MIRROR. dir="ltr" is on the element in the markup, so under Arabic the world keeps its shape and the two figures keep their sides; only the sentences inside set themselves right-to-left, which is what a sentence is supposed to do. AND THERE IS NO PANEL. Every other block on this site is `glass` — a tinted translucent fill, a hairline, an inner highlight and a dark ring. Round a map, all four of those are a second frame inside the one the map already has, and the tint is a second background behind a drawing whose whole ground is meant to be the page. So this band carries no surface at all: black is the ocean, the continents lie on it, and the two numbers sit under them. That is also why the map may be centred in a band wider than itself — there is no edge to the drawing, so there is nothing to letterbox. */ /* ONE TOKEN FOR A MARK, MIXED TOWARDS THE TEXT COLOUR. --text is near-white in the dark theme and near-black in the light one, so this single declaration gives a dot that is the palest thing on a black map and the darkest on a white one — no second rule, and no theme that was forgotten. */ .counts{--wm-mark:color-mix(in srgb,var(--accent-3) 30%,var(--text)); --cpad:clamp(18px,2.6vw,30px); position:relative; padding:0; border-radius:var(--r); overflow:hidden; isolation:isolate; direction:ltr; transition:border-color .25s var(--ease); /* THE BOX IS SIZED TO THE MAP, and the reason is arithmetic rather than taste. A world map is two and a third times as wide as it is tall, so the band's height is decided by its width: a map wide enough to fill a 1,460 px panel is 620 px tall before the two numbers under it have started. Cap the panel instead and the map fills it at a size the page can carry — which is also the only way the map looks laid ON the box rather than adrift in it, because a drawing held to 900 px inside a 1,460 px card is 280 px of empty glass down each side. AND THE VIEWBOX IS FITTED TO THE INK, so centring is not a margin somebody tuned: there is no land against the western antimeridian, and a map drawn in the projection's own frame sits 70 units right of centre inside its own box. tools/worldmap.py measures the drawing and writes both the viewBox and the aspect-ratio below. */ max-width:1200px; margin-inline:auto} /* THE MAP IS NOT THE PANEL. It ran edge to edge and top to bottom for one revision, at which size a world map is simply the largest thing on the page — 1,220 px of coastline for a band that exists to show two numbers. Given air on all four sides of it, it reads as a figure ON the panel rather than as the panel itself, and the two numbers under it are what the eye lands on. The SVG keeps Robinson's proportions and takes its height from them. A world stretched to fill a box is a different world, and cropping one to a shorter box cuts the Arctic and the Cape off a map whose whole job is to say "these places". */ .wm-wrap{display:flex; justify-content:center; padding:clamp(26px,3.4vw,44px) clamp(28px,5vw,56px) clamp(22px,2.8vw,38px)} .wm{display:block; width:100%; height:auto; aspect-ratio:888.2/428.2} /* THE COLOURS SAY WHICH LAYER IS WHICH, AND THE WHOLE MAP IS ONE HUE. The land is the accent at three strengths — a wash for the body, a fainter line for the borders, and the coast brightest of the three, because an outline is what makes a continent readable at this size. The marks are the same blue carried two steps further: saturated for the network, and mixed towards the TEXT colour for a dot, which makes it the palest thing on a dark map and the darkest on a light one without a second rule. Orange was a second hue on a page that has one, and it made the dots read as a warning rather than as a place. THE LAND IS DIMMER THAN IT WAS, because the subject of this drawing is the marks. A coastline as bright as a dot is a coastline competing with the answer. */ .wm-fill{fill:url(#wmSkin); opacity:.15} /* THE GRADIENT STOPS ARE COLOURED FROM HERE, not from a var() in a presentation attribute on the stop itself. A presentation attribute is parsed as a CSS value, so var() in one is legal — and it is the single construct in this sheet with no other use anywhere in the repo to stand on. When an engine does not resolve it the attribute is simply invalid and stop-color falls back to its initial value, BLACK: a black land wash on a black canvas and a black halo around every orange dot, with nothing in any console. */ #wmSkin stop:first-child{stop-color:var(--accent)} #wmSkin stop:last-child{stop-color:var(--accent-2)} #wmHalo stop{stop-color:var(--accent-3)} /* A border is a line inside the land and a coast is the edge of it, so the border is the quieter of the two — the same weight would make a country read as an island. */ .wm-bord{fill:none; stroke:var(--accent); stroke-width:.6; opacity:.3; stroke-linejoin:round} .wm-edge{fill:none; stroke:var(--accent); stroke-width:1.05; stroke-linejoin:round; opacity:.55; filter:drop-shadow(0 0 2px color-mix(in srgb,var(--accent) 35%,transparent))} /* ── the network, which runs between the DOTS ────────────────────────────────────────────── Not across the map. A lattice over the continents is a texture; a line from one place to another is the only kind of line on a map of traffic that means anything. Each dot is joined to the two nearest it, and the busiest is joined to the next few — so the shape is local where the countries are close together and reaches across an ocean where they are not. THE LINE IS THE ANIMATION, AND ALMOST NONE OF IT IS RUNNING. A short bright dash leaves one dot, arrives at the other, and then the line rests for the rest of a nine second cycle: `pathLength="100"` makes the dash pattern a percentage of the arc instead of a length nobody can know before layout, and dasharray 7+93 = 100 means exactly ONE dash is on the path at a time. Offset 0 and offset -100 are the same frame, so the loop closes on itself. ONLY NINE ARCS CARRY A BEAM AT ALL — the nine longest, because a beam that crosses an ocean is worth watching and one that crosses Belgium is a twitch — and each is lit for a fifth of its cycle. Two are moving at any moment, out of forty-odd lines. Every arc animated, at a third of a cycle each, was thirty moving lights on one panel: that is a fairground, and this is a map. */ /* NOTHING ON THE MAP MOVES WHILE IT IS OFF THE SCREEN. Its beams are SVG strokes, repainted on every frame they run, and they ran from the moment the page opened, five screens above them. .play comes from watchPicture in app.js; the dots' one fade-in waits for it too, so a visitor who scrolls down sees them arrive instead of finding them already there. */ .counts:not(.play) *{animation-play-state:paused !important} .wm-links{fill:none} .wm-link{stroke:var(--accent-3); stroke-width:.75; opacity:.32} .wm-beam{stroke:var(--wm-mark); stroke-width:1.8; stroke-linecap:round; stroke-dasharray:7 93; opacity:0; animation:wmBeam 9s linear infinite; animation-delay:var(--d)} @keyframes wmBeam{ 0% {stroke-dashoffset:0; opacity:0} 2% {opacity:.9} 19% {opacity:.9} 23% {stroke-dashoffset:-100; opacity:0} 100% {stroke-dashoffset:-100; opacity:0} } /* ── a dot is a country somebody opened the site from ────────────────────────────────────── A soft halo and the dot itself, and NEITHER OF THEM MOVES. Not slower — still. A dot is a place, and a place does not pulse; the only thing on this map that travels is a beam going from one place to another, which is the one kind of motion here that means something. The one animation a dot has is its arrival: a fade, once, staggered, and then never again. */ .wm-dot{opacity:0; animation:wmIn .55s var(--ease) forwards; animation-delay:var(--in)} .wm-dot .halo{fill:url(#wmHalo); opacity:.85} .wm-dot .core{fill:var(--wm-mark)} @keyframes wmIn{to{opacity:1}} /* ── the two figures, under the map ─────────────────────────────────────────────────────── TOP-ALIGNED, not bottom-aligned. The right-hand figure carries one line the left one does not, and aligning the boxes by their feet pushed its number up out of line with the other — two figures of the same kind reading at two different heights. */ /* NO RULE BETWEEN THE MAP AND THE NUMBERS. They are one measurement read two ways, and a line across the panel makes them two things stacked. The air above the figures is the separation, which is what separation is for. */ .counts-figs{display:flex; justify-content:space-between; align-items:flex-start; gap:clamp(16px,3vw,56px); padding:0 clamp(28px,5vw,56px) clamp(26px,3.2vw,40px)} /* PHYSICAL alignment, not `start`/`end`. The sentences below get their own direction back under Arabic, and `start` would then follow the SENTENCE and right-align a caption whose number is on the left. Left is left in this panel, in both languages. */ .count{max-width:min(32%,400px); text-align:left} .count.mid{text-align:center} .count.end{text-align:right} .count .n{display:block} /* inline-flex, so the box is the width of the DIGITS and not of the column — the "+n" is pinned to the end of this box, and against a full-width block it would fly off the panel instead of out of the number. */ .count b{position:relative; display:inline-flex; margin-top:10px; font-weight:700; font-size:clamp(32px,4.6vw,52px); letter-spacing:-.035em; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate} .count .cap{display:block; margin-top:9px; color:var(--muted); font-size:13px; line-height:1.5} /* THE PANEL DOES NOT MIRROR; THE SENTENCES IN IT DO. dir="ltr" on the panel pins the map and the two sides — and it pinned the paragraph direction too, which put the Latin word an Arabic sentence ends on ("… بحساب Cloudflare") at the far RIGHT of the line, the end an Arabic reader starts from. Direction is handed back to the captions alone: that is the one thing here that is about language rather than about layout. */ [dir="rtl"] .counts .cap{direction:rtl} /* ── what an increment looks like ────────────────────────────────────────────────────────── A "+3" that lifts off the number in green and fades. Green because it is the one colour on this site that means "went up" without a label, and it is the ONLY green here — the accent belongs to the product, and a counter is not the product. It is absolutely positioned out of the flow so a number that gains a digit does not jump sideways when the badge appears. On the RIGHT-hand figure it hangs off the other side of the digits: the panel clips its overflow (it has to, for the map's rounded corners), and a badge pinned outward there would be cut in half by the edge it is flying towards. */ .count .plus{position:absolute; inset-inline-start:calc(100% + 10px); top:.08em; font-size:.42em; font-weight:700; letter-spacing:-.01em; line-height:1; color:#34d399; opacity:0; pointer-events:none; white-space:nowrap; text-shadow:0 0 18px rgba(52,211,153,.45)} .count.end .plus{inset-inline-start:auto; inset-inline-end:calc(100% + 10px)} .count .plus.go{animation:countPlus 1.5s var(--ease) forwards} @keyframes countPlus{ 0% {opacity:0; transform:translateY(6px) scale(.85)} 18% {opacity:1; transform:translateY(0) scale(1.06)} 32% {opacity:1; transform:translateY(-2px) scale(1)} 70% {opacity:.9; transform:translateY(-16px) scale(1)} 100% {opacity:0; transform:translateY(-30px) scale(.96)} } /* The number itself answers too — a short green flash through the digits, so the eye is drawn to what changed rather than to the badge beside it. */ .count b.bumped .odo{animation:countFlash 1.1s var(--ease)} @keyframes countFlash{ 0% {color:#34d399; text-shadow:0 0 24px rgba(52,211,153,.35)} 60% {color:#34d399; text-shadow:0 0 10px rgba(52,211,153,.18)} 100%{color:inherit; text-shadow:none} } /* The line that says how many countries the dots are. It is TEXT and the map is aria-hidden, because this sentence is the part a screen reader needs and a coastline is not. --faint is 4.31:1 on the light theme's page, which is under AA for text this size, and this is the smallest text on the page carrying the only thing the map MEANS. */ .wm-legend{display:flex; align-items:center; gap:9px; margin-top:10px; color:var(--muted); direction:ltr; font-size:12.5px; line-height:1.5; letter-spacing:.01em; font-variant-numeric:tabular-nums} /* AN AUTHOR'S `display` BEATS THE UA SHEET'S [hidden], and this line is the whole reason the rule exists. `display:flex` above outranks `[hidden]{display:none}`, so hiding the legend from the script left the swatch on screen — a lone orange disc under the figure, meaning "a country", with no country and no sentence beside it. */ .wm-legend[hidden]{display:none} /* row-reverse, not a swapped margin: in a right-aligned figure the swatch belongs against the edge the text is aligned to, and reversing the row moves the dot AND packs the line to that edge in one declaration. */ .count.end .wm-legend{flex-direction:row-reverse} .wm-legend::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--wm-mark); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-3) 26%,transparent)} /* ── narrow ─────────────────────────────────────────────────────────────────────────────── Two figures of this size do not sit side by side on a phone, so they become a column — and the right-hand one stops being right-hand, swatch and all. */ @media (max-width:760px){ .counts-figs{display:grid; grid-template-columns:1fr; gap:22px} .count{max-width:none} .count.mid,.count.end{text-align:left} .count.end .plus{inset-inline-start:calc(100% + 10px); inset-inline-end:auto} .count.end .wm-legend{flex-direction:row} } @media (prefers-reduced-motion:reduce){ .count .plus.go{animation:none; opacity:0} .count b.bumped .odo{animation:none} .wm-dot{opacity:1; animation:none} .wm-beam{display:none} } /* ── cards (the generic glass card every other page uses) ──────────────────────────────── */ .grid{display:grid; gap:clamp(12px,1vw,20px)} .g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} @media (max-width:1000px){ .g4{grid-template-columns:repeat(2,1fr)} } @media (max-width:860px){ .g3{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .g4,.g3,.g2{grid-template-columns:1fr} } .card{position:relative; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r); padding:clamp(18px,2.4vw,26px); box-shadow:inset 0 1px 0 var(--glass-hi); transition:transform .25s var(--spring), border-color .25s var(--ease); overflow:hidden; isolation:isolate} /* the light falls from the top-start corner, the way it falls on the planet */ .card::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 62%)} [dir="rtl"] .card::before{background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 62%)} [data-theme="light"] .card::before{opacity:.5} /* A CARD MOVES ONLY WHEN IT IS A LINK. Every card used to lift and glow under the pointer — the model list, the values, the status figures — and a reader who sees a lift reads "press here", presses, and nothing happens. No blur either: a card sits on a black page, and blurring black costs the phone a pass and changes no pixel. */ a.card:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,var(--glass-line))} .card h3{font-size:16.5px; margin-bottom:8px} .card p{margin:0; color:var(--muted); font-size:14.2px; line-height:1.65} .card .num{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--faint); margin-bottom:14px} .ic{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} .ic svg{width:19px; height:19px; transition:transform .3s var(--spring)} a.card:hover .ic svg{transform:scale(1.08)} .card.tone{border-color:color-mix(in srgb,var(--brand) 34%,var(--glass-line)); background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 10%,transparent),color-mix(in srgb,var(--brand) 3%,transparent))} .card.tone h3{color:var(--brand)} .card.tone a{color:var(--brand); font-weight:600} /* ── model tiers: the two members of the 2.2 family, side by side ──────────────────────── Same architecture, same footprint, same memory bill — only the post-training differs, so the two cards carry the SAME skeleton and only the flagship is tinted. A tier card that looked like a pricing table would be claiming a difference the weights do not have. */ .tiers{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.2vw,20px)} @media (max-width:760px){ .tiers{grid-template-columns:1fr} } .card.tier{display:flex; flex-direction:column} .tier .t-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:9px} .tier .t-name{font-family:var(--head); font-size:clamp(17px,1.9vw,22px); font-weight:700; letter-spacing:-.02em; color:var(--text)} .tier .t-badge{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; padding:4px 9px; border-radius:var(--pill); color:var(--faint); border:1px solid var(--glass-line); background:color-mix(in srgb,var(--text) 4%,transparent); white-space:nowrap} .tier .t-id{font-family:var(--mono); font-size:12.2px; color:var(--accent); margin-bottom:13px; direction:ltr; word-break:break-word} .tier>p{margin:0 0 16px} .tier .t-pts{list-style:none; margin:auto 0 0; padding:14px 0 0; border-top:1px solid var(--glass-line); display:flex; flex-direction:column; gap:8px; font-size:13.4px; color:var(--muted); line-height:1.5} .tier .t-pts li{display:flex; gap:10px; align-items:flex-start} /* A REFERENCE TABLE ON A PHONE IS A LIST. Two columns of code and prose do not fit 390 px, and a table that scrolls sideways hides the half that explains the other — so each row stacks. */ @media (max-width:640px){ table.t.api-ep{min-width:0; display:block} .t.api-ep tbody{display:block} .t.api-ep thead{display:none} .t.api-ep tr{display:block; padding:12px 14px; border-bottom:1px solid var(--glass-line)} .t.api-ep tr:last-child{border-bottom:0} .t.api-ep td,table.t:not(.t-fit).api-ep td:first-child{display:block; padding:2px 0; border:0; white-space:normal; width:auto; min-width:0} .t.api-ep td:first-child{margin-bottom:6px} } .tier .t-pts li::before{content:""; flex:none; width:5px; height:5px; border-radius:50%; margin-top:6px; background:var(--faint)} .card.tier.flag{border-color:color-mix(in srgb,var(--accent) 38%,var(--glass-line))} .tier.flag .t-badge{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 42%,transparent); background:color-mix(in srgb,var(--accent) 11%,transparent)} .tier.flag .t-pts li::before{background:var(--accent)} /* the delta column of the tier comparison: a gain is green, a loss is left plain */ table.t td.nu{font-variant-numeric:tabular-nums} [dir="rtl"] table.t td.nu,[dir="rtl"] table.t td.up{direction:ltr; unicode-bidi:isolate; text-align:right; white-space:nowrap} table.t td.up{font-variant-numeric:tabular-nums; color:var(--ok-ink); font-weight:650} .two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,54px); align-items:start} @media (max-width:860px){ .two{grid-template-columns:1fr} } .list{margin:0; padding-inline-start:20px; color:var(--muted); font-size:15px; line-height:1.8} .list b{color:var(--text)} .rows{background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r); overflow:hidden; box-shadow:inset 0 1px 0 var(--glass-hi)} .rows>div{padding:16px 20px; border-bottom:1px solid var(--glass-line)} .rows>div:last-child{border-bottom:0} .rows b.k{display:block; color:var(--accent); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase} .rows .v{font-size:14.4px; margin-top:6px; color:var(--muted)} .rows .v b{color:var(--text)} .rows h3{font-size:15.5px; margin-bottom:6px} .rows p{margin:0; color:var(--muted); font-size:14px} .rows a{color:var(--accent); font-weight:600} /* ── the home page, told plainly ───────────────────────────────────────────────────────────── Written on 2026-10-05 for a reader who has never heard the word "model": visitors had looked at the Playground and said "so you made a chatbot". Five sections, each answering one plain question — what is it, what can it do, how do we know, is my data safe, how do I start — and each with one picture. HOW THE PICTURES MOVE (2026-10-06). The first version gave every picture its own endless loop, all at once — eight dots on the wires, a glow drifting under the model, six cards, a marching border, an orbit — and the page read as a fairground: a great deal moving, nothing being said. · A PICTURE TELLS ONE STORY, from an empty frame to a finished one, and then RESTS on the finished frame. The still is the picture; the motion is how it got there. · ONE STORY AT A TIME. The six cards take turns (initCaps in app.js), and #how is a single journey — an app asks, the model works, the answer comes back — that the three steps beside it follow line by line (initHow). · NOTHING RUNS WHERE NOBODY IS LOOKING. A picture moves only while it is in view (.play). · NO GLOW AND NO BOUNCE. Marks are solid and sharp; arrivals ease out on one curve (--e-out), travel eases in and out (--e-io), and nothing grows past its own size on the way in. · Under prefers-reduced-motion no story starts, and every picture shows its finished frame. Every keyframe set below starts and ends on the same frame, or is invisible at both ends of its run; scripts/test_home.mjs reads each one and holds it to that. ─────────────────────── */ #page-home{--e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1)} #page-home .band{padding-block:clamp(52px,7vw,100px)} /* a picture holds still while it is off the screen */ .how:not(.play),.how:not(.play) *,.how:not(.play) *::before,.how:not(.play) *::after, .vault:not(.play) *,.vault:not(.play) *::before,.vault:not(.play) *::after{animation-play-state:paused !important} /* a row of cards arrives as a row, left to right, not as one slab */ #page-home :is(.caps,.starts)>.rv:nth-child(3n+2){--d:.07s} #page-home :is(.caps,.starts)>.rv:nth-child(3n){--d:.14s} /* ── what it is: the words on the start side, the stack on the end side ── */ .how{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:clamp(34px,5vw,80px); align-items:center} @media (max-width:900px){ .how{grid-template-columns:1fr} } .how .sec-sub{max-width:54ch} /* the clock one journey is timed against: when it ends, initHow sends the next app's question */ .how.go{animation:howClock 5.2s linear both} @keyframes howClock{0%,100%{opacity:1}} /* The heading in two tones: the setup said quietly, the answer at full strength. */ .how .quiet{color:var(--muted)} /* THE THREE STEPS FOLLOW THE REQUEST IN THE PICTURE. Each is lit for exactly the part of the journey it describes; with no journey running — no script, reduced motion, the section not yet seen — all three read at full strength, because then they are simply the text. */ .flow{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px} .flow li{display:flex; align-items:flex-start; gap:14px; color:var(--text); font-size:15.5px; line-height:1.6} .flow li b{flex:0 0 auto; width:28px; height:28px; margin-top:-1px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:700; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)} .how.run .flow li{color:var(--muted)} .how.go .flow li:nth-child(1),.how.go .flow li:nth-child(1) b{animation-delay:0s; animation-duration:1.7s} .how.go .flow li:nth-child(2),.how.go .flow li:nth-child(2) b{animation-delay:1.35s; animation-duration:1.75s} .how.go .flow li:nth-child(3),.how.go .flow li:nth-child(3) b{animation-delay:2.8s; animation-duration:2.1s} .how.go .flow li{animation-name:stepText; animation-timing-function:linear; animation-fill-mode:both} .how.go .flow li b{animation-name:stepDot; animation-timing-function:linear; animation-fill-mode:both} @keyframes stepText{0%,100%{color:var(--muted)} 12%,82%{color:var(--text)}} @keyframes stepDot{0%,100%{color:var(--accent); background-color:transparent; border-color:color-mix(in srgb,var(--accent) 34%,transparent)} 12%,82%{color:var(--cta-ink); background-color:var(--accent); border-color:var(--accent)}} /* the stack: a thin layer of apps, four lanes, and the model as the slab under them */ .stack{position:relative; display:flex; flex-direction:column} .layer{position:relative; border-radius:var(--r); border:1px solid var(--glass-line); background:var(--glass); box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow); padding:clamp(18px,2.4vw,24px)} .layer-k{display:block; font-size:11px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)} /* The tags sit ON the top edge, like a label stuck to a box. The page's own background behind the text is what cuts the border line where they cross it. */ .layer-tag{position:absolute; top:0; inset-inline-end:clamp(14px,2vw,22px); transform:translateY(-50%); z-index:2; white-space:nowrap; font-size:12px; font-weight:650; line-height:1.2; padding:6px 12px; border-radius:var(--pill); color:var(--muted); background:var(--bg); border:1px solid var(--glass-line)} .layer-tag.us{color:var(--cta-ink); background:var(--cta); border-color:transparent} .apps-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px} .app{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px 12px; border-radius:var(--r-sm); text-align:center; border:1px solid var(--glass-line); background-color:color-mix(in srgb,var(--text) 3%,transparent)} .app svg{width:20px; height:20px; color:var(--accent)} .app b{font-size:12.5px; font-weight:650; line-height:1.3; color:var(--text)} /* the reply has arrived: a dot on the corner of the app that asked, the way an unread message is marked */ .app::after{content:""; position:absolute; top:8px; inset-inline-end:8px; width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.4)} .how.go .app.on{animation:appOn 5.2s var(--e-out) both} .how.go .app.on::after{animation:appGot 5.2s var(--e-out) both} @keyframes appOn{0%,100%{border-color:var(--glass-line); background-color:color-mix(in srgb,var(--text) 3%,transparent)} 5%,84%{border-color:color-mix(in srgb,var(--accent) 55%,transparent); background-color:color-mix(in srgb,var(--accent) 9%,transparent)}} @keyframes appGot{0%,72%,100%{opacity:0; transform:scale(.4)} 76%,86%{opacity:1; transform:none} 94%{opacity:0}} /* The lanes use the apps' own grid — same columns, same gap, same inset — so each one leaves from the middle of the app above it. Only the lane under the app that asked carries anything: the question goes down it (its bright head first), and the answer comes back up the same way. The wire clips them, so a mark comes out of one box and goes into the other. */ .wire{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; height:64px; overflow:hidden; padding-inline:calc(clamp(18px,2.4vw,24px) + 1px)} .wire i{position:relative; justify-self:center; width:1px; height:100%; background-color:color-mix(in srgb,var(--accent) 24%,transparent)} .wire i::before,.wire i::after{content:""; position:absolute; left:-1px; width:3px; height:18px; border-radius:2px; opacity:0} .wire i::before{top:-18px; background:linear-gradient(180deg,transparent,var(--text))} .wire i::after{top:100%; background:linear-gradient(0deg,transparent,var(--accent))} .how.go .wire i.on{animation:laneOn 5.2s linear both} .how.go .wire i.on::before{animation:askDown 1s var(--e-io) .3s both} .how.go .wire i.on::after{animation:answerUp 1s var(--e-io) 2.8s both} @keyframes laneOn{0%,5%,27%,53%,75%,100%{background-color:color-mix(in srgb,var(--accent) 24%,transparent)} 9%,23%,57%,71%{background-color:color-mix(in srgb,var(--accent) 70%,transparent)}} @keyframes askDown{0%{transform:translateY(0); opacity:0} 15%,85%{opacity:1} 100%{transform:translateY(82px); opacity:0}} @keyframes answerUp{0%{transform:translateY(0); opacity:0} 15%,85%{opacity:1} 100%{transform:translateY(-82px); opacity:0}} .layer.core{display:flex; align-items:center; gap:clamp(14px,2vw,20px); padding-block:clamp(26px,3.6vw,36px); isolation:isolate; border-color:color-mix(in srgb,var(--accent) 40%,var(--glass-line))} /* The ground the model stands on: a fine lattice of points, quiet until a question reaches it. A background, not children, so the rounded corners clip it without overflow:hidden — which would also have clipped the tag standing on the edge. */ .core-field{position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:.4; background:radial-gradient(color-mix(in srgb,var(--accent) 34%,transparent) 1px,transparent 1.6px) 0 0 / 16px 16px; -webkit-mask:radial-gradient(130% 150% at 50% 50%,#000 35%,transparent 80%); mask:radial-gradient(130% 150% at 50% 50%,#000 35%,transparent 80%)} /* the model at work: the ground it stands on comes up while it writes. No line runs along its foot — one did, it was taken out on review, and scripts/test_home.mjs keeps it out. */ .how.go .core-field{animation:groundUp 1.6s var(--e-out) 1.25s both} @keyframes groundUp{0%,100%{opacity:.4} 25%,75%{opacity:1}} .core-txt{display:flex; flex-direction:column; gap:4px; min-width:0} .core-name{font-family:var(--display); font-weight:400; font-size:clamp(16px,2vw,22px); letter-spacing:.06em; text-transform:uppercase; line-height:1.2; color:var(--text); -webkit-text-stroke:.5px currentColor; direction:ltr; unicode-bidi:isolate} [dir="rtl"] .core-name{text-align:right} .core-does{font-size:13.5px; color:var(--muted)} /* ── the model's mark: the hero's planet, small ───────────────────────────────────────────── The same map, the same twenty-degree lean, the same light from the upper left as the planet at the top of the page — so the thing the page calls "the model" is the thing the visitor has already seen. It was a cartoon ball with a ring and a pulsing glow, drawn in gradients, three times on one page. The picture is named only once the section is near (.seen): a browser fetches a background the moment its rule matches, and the bottom of a page nobody scrolled to should not cost anybody 26 KB. */ .globe{position:relative; flex:0 0 auto; width:56px; aspect-ratio:1; border-radius:50%; overflow:hidden; isolation:isolate; background:#1a4fb0; box-shadow:0 0 0 1px rgba(160,220,255,.16), 0 12px 28px -14px rgba(0,0,0,.9)} .globe>i{position:absolute; inset:0; display:block} .globe .gm{transform:rotate(20deg)} .globe .gm::before{content:""; position:absolute; inset:-8% auto -8% -100%; width:200%; background-size:50% 100%; background-repeat:repeat-x; animation:revolve 60s linear infinite} #page-home .seen .globe .gm::before{background-image:url(/vendor/planet-2-sm.webp)} .globe .gs{background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.24),rgba(255,255,255,0) 34%), radial-gradient(circle at 34% 30%,transparent 42%,rgba(3,8,22,.35) 62%,rgba(2,6,16,.9) 88%,rgba(1,4,12,.98) 100%); box-shadow:inset 0 0 6px rgba(125,211,252,.32)} .layer.core .globe{margin-inline:6px 2px} .globe.sm{width:34px} .cap-art .globe .gm::before{animation:none} /* ── what it can do: six cards, and one picture moving at a time ── */ .caps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1vw,20px)} @media (max-width:980px){ .caps{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ .caps{grid-template-columns:1fr} } /* The picture runs edge to edge across the top of the card and the words sit under a hairline: one surface, divided — not a second box drawn inside the first. */ .cap.card{--cp:clamp(18px,2.4vw,26px); padding:var(--cp); display:flex; flex-direction:column} /* not a link, so it does not lift like one; pointing at it plays its picture again */ .cap.card:hover{transform:none; box-shadow:inset 0 1px 0 var(--glass-hi); border-color:color-mix(in srgb,var(--accent) 30%,var(--glass-line))} .cap h3{margin-top:22px} .cap-art{position:relative; height:148px; margin:calc(var(--cp) * -1) calc(var(--cp) * -1) 0; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--glass-line); background:color-mix(in srgb,var(--text) 2.2%,transparent)} /* the clock a card's story is timed against: when it ends, initCaps hands the turn to the next card */ .cap-art.go{animation:capClock 3.6s linear both} @keyframes capClock{0%,100%{opacity:1}} /* languages: a line, the reply being typed, the reply. THE WORDS ARE DRAWN BY THE SHEET, not written in the page. They are a picture of two languages, and as text the Arabic one made the English document Arabic in the eyes of everything that reads it as text — a crawler, a screen reader, scripts/test_ar_seo.py ("an English body has no Arabic"). Generated content is not part of the document, and the picture is aria-hidden anyway. No dir attribute either: a logical inset is resolved in the element's OWN direction, and dir="rtl" once sent the Arabic bubble to the wrong side of an English page. */ .art-lang .bub{position:absolute; padding:7px 13px; border-radius:14px; font-size:13.5px; font-weight:650; line-height:1.25; color:var(--text); background:var(--surface-2); border:1px solid var(--glass-line)} .art-lang .b1::before{content:"Hello"} .art-lang .b2::before{content:"مرحبًا"} .art-lang .b1{top:34px; inset-inline-start:17%; border-end-start-radius:4px} .art-lang .b2,.art-lang .b3{top:78px; inset-inline-end:17%; border-end-end-radius:4px} .art-lang .b2{background:color-mix(in srgb,var(--accent) 14%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 40%,transparent)} .art-lang .b3{display:flex; gap:4px; padding:11px 12px; opacity:0} .art-lang .b3 i{width:5px; height:5px; border-radius:50%; background:var(--muted); opacity:.4} .art-lang.go .b1{animation:saidA 3.6s var(--e-out) both} .art-lang.go .b3{animation:typingB 3.6s var(--e-out) both} .art-lang.go .b2{animation:saidB 3.6s var(--e-out) both} .art-lang.go .b3 i{animation:typing .6s ease-in-out 1.05s 2 both} .art-lang.go .b3 i:nth-child(2){animation-delay:1.15s} .art-lang.go .b3 i:nth-child(3){animation-delay:1.25s} @keyframes saidA{0%,100%{opacity:1; transform:none} 6%{opacity:0; transform:none} 12%{opacity:0; transform:translateY(8px)} 22%{opacity:1; transform:none}} @keyframes typingB{0%,26%,100%{opacity:0; transform:translateY(8px)} 32%,52%{opacity:1; transform:none} 56%{opacity:0; transform:none}} @keyframes saidB{0%,100%{opacity:1; transform:none} 6%{opacity:0; transform:none} 56%{opacity:0; transform:translateY(8px)} 66%{opacity:1; transform:none}} @keyframes typing{0%,60%,100%{transform:translateY(0); opacity:.4} 30%{transform:translateY(-3px); opacity:1}} /* vision: a picture read top to bottom, and the thing found in it framed */ .art-see .photo{position:relative; width:160px; height:98px; border-radius:10px; overflow:hidden; border:1px solid var(--glass-line); background:linear-gradient(180deg,color-mix(in srgb,var(--accent-3) 30%,transparent),color-mix(in srgb,var(--accent-2) 14%,transparent))} .art-see .photo i{position:absolute; display:block} .art-see .sun{top:17px; inset-inline-end:28px; width:18px; height:18px; border-radius:50%; background:var(--warn)} .art-see .hill{border-radius:50%} .art-see .h1{bottom:-34px; inset-inline-start:-24px; width:116px; height:78px; background:color-mix(in srgb,var(--accent-3) 50%,var(--bg))} .art-see .h2{bottom:-44px; inset-inline-start:58px; width:132px; height:86px; background:color-mix(in srgb,var(--accent-2) 42%,var(--bg))} /* the frame is four corners, not a box: the way a camera marks what it has found */ .art-see .box{top:9px; inset-inline-end:19px; width:36px; height:36px; color:var(--text); --c:linear-gradient(currentColor,currentColor); background:var(--c) 0 0/9px 1.5px, var(--c) 0 0/1.5px 9px, var(--c) 100% 0/9px 1.5px, var(--c) 100% 0/1.5px 9px, var(--c) 0 100%/9px 1.5px, var(--c) 0 100%/1.5px 9px, var(--c) 100% 100%/9px 1.5px, var(--c) 100% 100%/1.5px 9px; background-repeat:no-repeat} .art-see .scan{top:0; inset-inline:0; height:1.5px; background:var(--accent); opacity:0} .art-see .scan::after{content:""; position:absolute; inset-inline:0; bottom:100%; height:26px; background:linear-gradient(0deg,color-mix(in srgb,var(--accent) 24%,transparent),transparent)} .art-see.go .scan{animation:readPhoto 3.6s var(--e-io) both} .art-see.go .box{animation:found 3.6s var(--e-out) both} @keyframes readPhoto{0%,8%,100%{opacity:0; transform:translateY(0)} 12%{opacity:1; transform:translateY(4px)} 46%{opacity:1; transform:translateY(96px)} 50%{opacity:0; transform:translateY(96px)}} @keyframes found{0%,100%{opacity:1; transform:none} 6%{opacity:0; transform:none} 50%{opacity:0; transform:scale(1.4)} 62%{opacity:1; transform:none}} /* long reading: the page is read line by line, then turned for the next one. The drawing is a page, so in Arabic it is read — and turned — from the other side. */ .art-read .pages{position:relative; width:86px; height:100px} [dir="rtl"] .art-read .pages{transform:scaleX(-1)} .art-read .pages>i{position:absolute; inset:0; border-radius:9px; border:1px solid var(--glass-line); background:var(--surface-2)} .art-read .pages>i:nth-child(1){transform:translate(16px,-9px) rotate(7deg); opacity:.45} .art-read .pages>i:nth-child(2){transform:translate(8px,-4px) rotate(3.5deg); opacity:.75} .art-read .pg{position:absolute; inset:0; border-radius:9px; border:1px solid var(--glass-line); background:var(--surface); padding:15px 12px; display:flex; flex-direction:column; gap:8px; overflow:hidden} .art-read .pg b{position:relative; display:block; height:4px; border-radius:3px; background:color-mix(in srgb,var(--text) 18%,transparent)} .art-read .pg b:nth-child(2){width:86%} .art-read .pg b:nth-child(3){width:94%} .art-read .pg b:nth-child(4){width:70%} .art-read .pg b:nth-child(5){width:90%} .art-read .pg b:nth-child(6){width:56%} /* what has been read: the accent runs along each line in turn */ .art-read .pg b::after{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--accent); transform:scaleX(0); transform-origin:0 50%} .art-read.go .pg{animation:turnPage 3.6s var(--e-out) both} .art-read.go .pg b:nth-child(1)::after{animation:line1 3.6s linear both} .art-read.go .pg b:nth-child(2)::after{animation:line2 3.6s linear both} .art-read.go .pg b:nth-child(3)::after{animation:line3 3.6s linear both} .art-read.go .pg b:nth-child(4)::after{animation:line4 3.6s linear both} .art-read.go .pg b:nth-child(5)::after{animation:line5 3.6s linear both} .art-read.go .pg b:nth-child(6)::after{animation:line6 3.6s linear both} @keyframes line1{0%,8%,75%,100%{transform:scaleX(0)} 16%,74%{transform:scaleX(1)}} @keyframes line2{0%,16%,75%,100%{transform:scaleX(0)} 24%,74%{transform:scaleX(1)}} @keyframes line3{0%,24%,75%,100%{transform:scaleX(0)} 32%,74%{transform:scaleX(1)}} @keyframes line4{0%,32%,75%,100%{transform:scaleX(0)} 40%,74%{transform:scaleX(1)}} @keyframes line5{0%,40%,75%,100%{transform:scaleX(0)} 48%,74%{transform:scaleX(1)}} @keyframes line6{0%,48%,75%,100%{transform:scaleX(0)} 56%,74%{transform:scaleX(1)}} @keyframes turnPage{0%,62%,100%{transform:none; opacity:1} 74%{transform:translate(-22px,-6px) rotate(-8deg); opacity:0} 75%{transform:translate(8px,-4px) rotate(3.5deg); opacity:0} 90%{transform:none; opacity:1}} /* reasoning: a line of steps walked one at a time, ending on a tick. The line reads in the direction of the language, so it is mirrored in Arabic — and the tick is mirrored back. */ .art-think .chain{position:relative; width:190px; height:2px; background:color-mix(in srgb,var(--text) 14%,transparent)} [dir="rtl"] .art-think .chain{transform:scaleX(-1)} [dir="rtl"] .art-think .ok svg{transform:scaleX(-1)} .art-think .prog{position:absolute; inset:0; background:var(--accent); transform-origin:0 50%} .art-think .chain>i{position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--accent); border:2px solid var(--accent); box-shadow:inset 0 0 0 2px var(--surface)} /* every step is placed, the first one too: an absolute box with no `left` sits at its STATIC position, which in Arabic is the right-hand end — and the mirrored line then drew it on top of the tick */ .art-think .chain>i:nth-of-type(1){left:0} .art-think .chain>i:nth-of-type(2){left:33.333%} .art-think .chain>i:nth-of-type(3){left:66.667%} .art-think .chain>i.ok{left:100%; width:28px; height:28px; margin:-14px 0 0 -14px; display:grid; place-items:center; color:var(--ok); background:var(--surface); border:1.5px solid color-mix(in srgb,var(--ok) 60%,transparent); box-shadow:none} .art-think .ok svg{width:13px; height:13px} .art-think.go .prog{animation:walk 3.6s linear both} .art-think.go .chain>i:nth-of-type(1){animation:step1 3.6s var(--e-out) both} .art-think.go .chain>i:nth-of-type(2){animation:step2 3.6s var(--e-out) both} .art-think.go .chain>i:nth-of-type(3){animation:step3 3.6s var(--e-out) both} .art-think.go .ok,.art-code.go .pass,.art-tools.go .done{animation:tick 3.6s var(--e-out) both} @keyframes walk{0%,100%{transform:scaleX(1); opacity:1} 6%{transform:scaleX(1); opacity:0; animation-timing-function:steps(1,end)} 7%{transform:scaleX(0); opacity:0} 9%{transform:scaleX(0); opacity:1} 69%{transform:scaleX(1); opacity:1}} @keyframes step1{0%,13%,100%{background-color:var(--accent); border-color:var(--accent); transform:none} 6%,9%{background-color:var(--surface); border-color:color-mix(in srgb,var(--text) 22%,transparent); transform:scale(.8)}} @keyframes step2{0%,33%,100%{background-color:var(--accent); border-color:var(--accent); transform:none} 6%,29%{background-color:var(--surface); border-color:color-mix(in srgb,var(--text) 22%,transparent); transform:scale(.8)}} @keyframes step3{0%,53%,100%{background-color:var(--accent); border-color:var(--accent); transform:none} 6%,49%{background-color:var(--surface); border-color:color-mix(in srgb,var(--text) 22%,transparent); transform:scale(.8)}} @keyframes tick{0%,100%{opacity:1; transform:none} 6%,69%{opacity:0; transform:scale(.7)} 77%{opacity:1; transform:none}} /* code: five lines typed one after another, and a tick when the last one lands. Each line is uncovered in steps, a few characters at a time, the way typing looks. */ .art-code .ed{position:relative; width:172px; padding:14px 14px 14px 30px; border-radius:10px; direction:ltr; text-align:left; border:1px solid var(--glass-line); background:var(--surface); display:flex; flex-direction:column; gap:8px} .art-code .ed::before{content:""; position:absolute; left:20px; top:10px; bottom:10px; width:1px; background:var(--glass-line)} .art-code .ed b{display:block; height:5px; border-radius:3px} .art-code .ed b:nth-child(1){width:62%; background:var(--accent-2)} .art-code .ed b:nth-child(2){width:80%; margin-left:12px; background:var(--accent)} .art-code .ed b:nth-child(3){width:52%; margin-left:12px; background:color-mix(in srgb,var(--text) 32%,transparent)} .art-code .ed b:nth-child(4){width:70%; margin-left:12px; background:var(--accent)} .art-code .ed b:nth-child(5){width:30%; background:var(--accent-2)} .art-code.go .ed b:nth-child(1){animation:type1 3.6s linear both} .art-code.go .ed b:nth-child(2){animation:type2 3.6s linear both} .art-code.go .ed b:nth-child(3){animation:type3 3.6s linear both} .art-code.go .ed b:nth-child(4){animation:type4 3.6s linear both} .art-code.go .ed b:nth-child(5){animation:type5 3.6s linear both} @keyframes type1{0%,100%{clip-path:inset(0); opacity:1} 6%{clip-path:inset(0); opacity:0; animation-timing-function:steps(1,end)} 7%,10%{clip-path:inset(0 100% 0 0); opacity:1; animation-timing-function:steps(7,end)} 20%{clip-path:inset(0); opacity:1}} @keyframes type2{0%,100%{clip-path:inset(0); opacity:1} 6%{clip-path:inset(0); opacity:0; animation-timing-function:steps(1,end)} 7%,22%{clip-path:inset(0 100% 0 0); opacity:1; animation-timing-function:steps(9,end)} 34%{clip-path:inset(0); opacity:1}} @keyframes type3{0%,100%{clip-path:inset(0); opacity:1} 6%{clip-path:inset(0); opacity:0; animation-timing-function:steps(1,end)} 7%,36%{clip-path:inset(0 100% 0 0); opacity:1; animation-timing-function:steps(6,end)} 44%{clip-path:inset(0); opacity:1}} @keyframes type4{0%,100%{clip-path:inset(0); opacity:1} 6%{clip-path:inset(0); opacity:0; animation-timing-function:steps(1,end)} 7%,46%{clip-path:inset(0 100% 0 0); opacity:1; animation-timing-function:steps(8,end)} 58%{clip-path:inset(0); opacity:1}} @keyframes type5{0%,100%{clip-path:inset(0); opacity:1} 6%{clip-path:inset(0); opacity:0; animation-timing-function:steps(1,end)} 7%,60%{clip-path:inset(0 100% 0 0); opacity:1; animation-timing-function:steps(4,end)} 66%{clip-path:inset(0); opacity:1}} .art-code .pass{position:absolute; right:-11px; bottom:-11px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--ok); background:var(--surface); border:1.5px solid color-mix(in srgb,var(--ok) 60%,transparent)} .art-code .pass svg{width:13px; height:13px} /* tools: the model reaches out to one tool, then the next, then the next — and the job is done. The lines are drawn from the model outwards (pathLength="1", so a dash offset of 1 is "none of it yet" whatever its real length). */ .art-tools .hub{position:relative; width:168px; height:116px} .art-tools .spokes{position:absolute; inset:0; width:100%; height:100%; overflow:visible} .art-tools .spokes path{fill:none; stroke:color-mix(in srgb,var(--accent) 55%,transparent); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:0} .art-tools .tool{position:absolute; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:var(--accent); background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 50%,transparent)} .art-tools .tool svg{width:15px; height:15px} .art-tools .t1{left:68px; top:2px} .art-tools .t2{left:124px; top:72px} .art-tools .t3{left:12px; top:72px} .art-tools .globe{position:absolute; left:67px; top:41px} .art-tools .done{position:absolute; left:91px; top:34px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:var(--ok); background:var(--surface); border:1.5px solid color-mix(in srgb,var(--ok) 60%,transparent)} .art-tools .done svg{width:9px; height:9px} .art-tools.go .spokes path:nth-child(1){animation:reach1 3.6s var(--e-io) both} .art-tools.go .spokes path:nth-child(2){animation:reach2 3.6s var(--e-io) both} .art-tools.go .spokes path:nth-child(3){animation:reach3 3.6s var(--e-io) both} .art-tools.go .t1{animation:use1 3.6s var(--e-out) both} .art-tools.go .t2{animation:use2 3.6s var(--e-out) both} .art-tools.go .t3{animation:use3 3.6s var(--e-out) both} @keyframes reach1{0%,100%{stroke-dashoffset:0; opacity:1} 6%{stroke-dashoffset:0; opacity:0; animation-timing-function:steps(1,end)} 7%,10%{stroke-dashoffset:1; opacity:1} 20%{stroke-dashoffset:0; opacity:1}} @keyframes reach2{0%,100%{stroke-dashoffset:0; opacity:1} 6%{stroke-dashoffset:0; opacity:0; animation-timing-function:steps(1,end)} 7%,26%{stroke-dashoffset:1; opacity:1} 36%{stroke-dashoffset:0; opacity:1}} @keyframes reach3{0%,100%{stroke-dashoffset:0; opacity:1} 6%{stroke-dashoffset:0; opacity:0; animation-timing-function:steps(1,end)} 7%,42%{stroke-dashoffset:1; opacity:1} 52%{stroke-dashoffset:0; opacity:1}} @keyframes use1{0%,24%,100%{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 50%,transparent)} 6%,19%{color:var(--faint); border-color:var(--glass-line)}} @keyframes use2{0%,40%,100%{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 50%,transparent)} 6%,35%{color:var(--faint); border-color:var(--glass-line)}} @keyframes use3{0%,56%,100%{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 50%,transparent)} 6%,51%{color:var(--faint); border-color:var(--glass-line)}} /* ── how we know: three figures, then the card itself ───────────────────────────────────── One panel cut in three, not three numbers floating on hairlines: the figure, what it counts, a line on where it comes from, and the place to check it. The figures are one size whatever their length, the "+" stands at the top of the digits instead of sitting on their line, and a brand name is never broken across two lines (.nw). */ .figs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:var(--r-lg)} .fig{display:flex; flex-direction:column; align-items:flex-start; padding:clamp(22px,2.8vw,34px) clamp(20px,2.6vw,32px)} .fig+.fig{border-inline-start:1px solid var(--glass-line)} @media (max-width:760px){ .figs{grid-template-columns:1fr} .fig+.fig{border-inline-start:0; border-top:1px solid var(--glass-line)} } .fig-n{display:flex; align-items:flex-start; font-family:var(--head); font-weight:700; font-size:clamp(40px,4.6vw,64px); line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; color:var(--text); direction:ltr; unicode-bidi:isolate} .fig-n i{font-style:normal; font-size:.5em; line-height:1; margin-inline-start:.06em; color:var(--accent)} .fig-l{margin-top:clamp(14px,1.6vw,18px); font-size:16px; font-weight:650; letter-spacing:-.01em; line-height:1.4; color:var(--text)} .fig-s{margin-top:6px; font-size:14px; line-height:1.6; color:var(--muted); max-width:36ch; text-wrap:balance} .fig-a{margin-top:auto; padding-top:clamp(16px,2vw,22px); font-size:13.5px; font-weight:650; color:var(--accent)} .fig-a:hover{text-decoration:underline; text-underline-offset:3px} .fig .nw{white-space:nowrap} #proof .sub-h{margin-top:clamp(44px,5.4vw,72px)} #cmp{scroll-margin-top:calc(var(--nav-top) + 18px)} /* ── is my data safe: the company's walls, and the model inside them ──────────────────────── The story is the sentence beside it: the model reads the company's own documents, one after another, and every line it reads along stays inside the wall. Nothing moves toward the wall, nothing crosses it, and the wall itself holds still — a boundary that marches is a boundary that looks busy. The wall, the four lines and the marks that travel them are one drawing in the box's own 500×400 frame; the box is always 5:4, so the documents placed in % below sit exactly on the ends of the lines. */ .priv{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(34px,5vw,80px); align-items:center} @media (max-width:900px){ .priv{grid-template-columns:1fr} .priv-art{order:2} } /* The company as a building (2026-11-02, replacing the box with four documents). A front view in physical left-to-right in both languages — the element carries dir="ltr", a building does not mirror. Everything that moves is under .vault, so it holds still off the screen with the rest. The marks and the lit floors run on one 9 s clock, a floor every 3 s: the floor lights, its file goes DOWN the left lane to the model, the model's ring answers 2.34 s in, and the reply comes back UP the right lane to the same floor, which lights again. Flat colour only — no gradient, no glow. */ .vault{position:relative; width:100%; max-width:540px; aspect-ratio:5/4; margin-inline:auto} .tw-net{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none} .tw-net *{vector-effect:non-scaling-stroke} .tw-star{fill:color-mix(in srgb,var(--text) 35%,transparent)} [data-theme="light"] .tw-star{display:none} .tw-bld{fill:color-mix(in srgb,var(--accent) 3%,var(--bg)); stroke:color-mix(in srgb,var(--accent) 45%,transparent); stroke-width:1.2} .tw-wing{fill:color-mix(in srgb,var(--accent) 2%,var(--bg)); stroke:color-mix(in srgb,var(--accent) 30%,transparent); stroke-width:1.1} .tw-slab{stroke:color-mix(in srgb,var(--accent) 20%,transparent); stroke-width:1} .tw-ground{stroke:color-mix(in srgb,var(--text) 24%,transparent); stroke-width:1.2} .tw-base{fill:color-mix(in srgb,var(--accent) 5%,var(--bg)); stroke:color-mix(in srgb,var(--accent) 45%,transparent); stroke-width:1.2} .tw-wn{fill:color-mix(in srgb,var(--text) 4%,transparent); stroke:color-mix(in srgb,var(--text) 12%,transparent); stroke-width:1} .tw-wn.on{fill:color-mix(in srgb,var(--accent) 16%,transparent); stroke:color-mix(in srgb,var(--accent) 30%,transparent)} .vault .tw-wn.amb{animation:twAmb 7s ease-in-out infinite} .vault .tw-wn.amb.k2{animation-duration:9s; animation-delay:-3s} .vault .tw-wn.amb.k3{animation-duration:5.5s; animation-delay:-2s} @keyframes twAmb{0%,100%{fill:color-mix(in srgb,var(--text) 4%,transparent)} 50%{fill:color-mix(in srgb,var(--accent) 18%,transparent)}} /* a floor lights when it sends, and again when its answer arrives */ .tw-act rect{fill:color-mix(in srgb,var(--accent) 62%,transparent); stroke:var(--accent); stroke-width:1} .tw-act{opacity:0} .vault .tw-act{animation:twFloor 9s linear infinite} .vault .tw-act.a2{animation-delay:3s} .vault .tw-act.a3{animation-delay:6s} @keyframes twFloor{0%,13%,56%,72%,100%{opacity:0} 2%,8%{opacity:1} 60%,66%{opacity:1}} .tw-lane{stroke:color-mix(in srgb,var(--accent) 26%,transparent); stroke-width:1} .tw-door{fill:var(--bg); stroke:color-mix(in srgb,var(--accent) 55%,transparent); stroke-width:1.2} .tw-canopy{stroke:color-mix(in srgb,var(--accent) 45%,transparent); stroke-width:1.6; stroke-linecap:round} .tw-lock{fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round} .tw-rack{fill:var(--surface); stroke:var(--glass-line); stroke-width:1} .tw-rline{stroke:var(--glass-line); stroke-width:1} .tw-vent{stroke:color-mix(in srgb,var(--text) 14%,transparent); stroke-width:1.3; stroke-linecap:round} .tw-led{fill:var(--accent)} .tw-led.v{fill:var(--accent-2)} .vault .tw-led{animation:twLed 1.8s ease-in-out infinite} .vault .tw-led.t2{animation-duration:2.6s} .vault .tw-led.t3{animation-duration:3.3s; animation-delay:-.7s} .vault .tw-led.t4{animation-duration:1.3s; animation-delay:-.4s} @keyframes twLed{0%,100%{opacity:.22} 50%{opacity:1}} .tw-cut{fill:none; stroke:color-mix(in srgb,var(--muted) 65%,transparent); stroke-width:1.2; stroke-dasharray:3 4} .tw-x{fill:none; stroke:var(--danger); stroke-width:2; stroke-linecap:round} .tw-cloud rect{fill:var(--surface); stroke:color-mix(in srgb,var(--text) 22%,transparent); stroke-width:1; stroke-dasharray:3 3} .tw-cloud path{fill:none; stroke:var(--faint); stroke-width:2; stroke-linecap:round; stroke-linejoin:round} /* the trips: down the left lane in the accent, back up the right lane in the text colour. Each loop closes on the frame it opened with; the jump back to the start is made while the mark is hidden. */ .tw-dn,.tw-up{opacity:0} .tw-dn{fill:var(--accent)} .tw-up{fill:var(--text)} .vault .tw-dn.f1{animation:twDn1 9s var(--e-io) infinite} .vault .tw-dn.f2{animation:twDn2 9s var(--e-io) infinite 3s} .vault .tw-dn.f3{animation:twDn3 9s var(--e-io) infinite 6s} .vault .tw-up.f1{animation:twUp1 9s var(--e-io) infinite} .vault .tw-up.f2{animation:twUp2 9s var(--e-io) infinite 3s} .vault .tw-up.f3{animation:twUp3 9s var(--e-io) infinite 6s} @keyframes twDn1{0%,100%{transform:translateY(0); opacity:0} 5%{opacity:1} 26%{transform:translateY(215px); opacity:1} 28%,99%{transform:translateY(215px); opacity:0}} @keyframes twDn2{0%,100%{transform:translateY(0); opacity:0} 5%{opacity:1} 26%{transform:translateY(162px); opacity:1} 28%,99%{transform:translateY(162px); opacity:0}} @keyframes twDn3{0%,100%{transform:translateY(0); opacity:0} 5%{opacity:1} 26%{transform:translateY(109px); opacity:1} 28%,99%{transform:translateY(109px); opacity:0}} @keyframes twUp1{0%,36%,100%{transform:translateY(0); opacity:0} 40%{opacity:1} 58%{transform:translateY(-215px); opacity:1} 60%,99%{transform:translateY(-215px); opacity:0}} @keyframes twUp2{0%,36%,100%{transform:translateY(0); opacity:0} 40%{opacity:1} 58%{transform:translateY(-162px); opacity:1} 60%,99%{transform:translateY(-162px); opacity:0}} @keyframes twUp3{0%,36%,100%{transform:translateY(0); opacity:0} 40%{opacity:1} 58%{transform:translateY(-109px); opacity:1} 60%,99%{transform:translateY(-109px); opacity:0}} /* the model, in the server room, and the ring it answers with each time a file reaches it */ .vault .globe,.tw-ring{position:absolute; left:50%; top:83.5%; width:12.4%; translate:-50% -50%} .tw-ring{aspect-ratio:1; border-radius:50%; border:1.5px solid var(--accent); opacity:0} .vault .tw-ring{animation:twTook 3s var(--e-out) infinite} @keyframes twTook{0%,76%,100%{opacity:0; transform:scale(1)} 80%{opacity:.85; transform:scale(1.02)} 98%{opacity:0; transform:scale(1.7)}} /* the words: HTML, not SVG text, so they keep their size on a phone and take Almarai in Arabic */ .tw-k{position:absolute; left:50%; top:11.25%; translate:-50% -50%; z-index:2; padding:3px 11px; border-radius:var(--pill); white-space:nowrap; font-size:11.5px; font-weight:650; color:var(--accent); background:var(--bg); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)} .tw-room{position:absolute; left:17.2%; top:71%; translate:0 -50%; font-size:11px; font-weight:650; color:var(--accent); white-space:nowrap} .tw-net-k{position:absolute; left:87.2%; top:29%; translate:-50% -50%; font-size:11px; font-weight:650; color:var(--faint); white-space:nowrap} .checks{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px} .checks li{display:flex; align-items:center; gap:12px; font-size:15.5px; font-weight:620; color:var(--text)} .checks svg{flex:0 0 auto; width:28px; height:28px; padding:6.5px; border-radius:50%; color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid color-mix(in srgb,var(--ok) 32%,transparent)} /* ── the last screen: one line and the two buttons, centred, with a hairline above ── */ /* ── how do I start: three doors ── */ .starts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1vw,20px)} @media (max-width:900px){ .starts{grid-template-columns:1fr} } .start{display:flex; flex-direction:column; color:inherit} .start-ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:var(--accent); margin-bottom:20px; background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)} .start-ic svg{width:21px; height:21px} .start h3{font-size:19px} .start p{flex:1} .start-go{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:14px; font-weight:650; color:var(--accent)} .start-go svg{width:14px; height:14px; transition:transform .22s var(--spring)} .start:hover .start-go svg{transform:translateX(3px)} [dir="rtl"] .start-go svg{transform:scaleX(-1)} [dir="rtl"] .start:hover .start-go svg{transform:scaleX(-1) translateX(3px)} /* The highlighted door (Try it). Flat ice only — no gradient, no glow: the tint is the accent laid evenly over the card's own glass, and the button is the accent as a solid fill. Ink on it is the page colour, which is near-black on ice and near-white on the light theme's deep blue. */ .start.start-hi{border-color:color-mix(in srgb,var(--accent) 60%,transparent); background:linear-gradient(color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent) 9%,transparent)),var(--glass)} a.start.start-hi:hover{border-color:var(--accent)} .start-hi .start-ic{background:var(--accent); border-color:var(--accent); color:var(--bg)} .start-hi .start-go{align-self:flex-start; padding:11px 20px; border-radius:var(--pill); background:var(--accent); color:var(--bg); transition:background .2s var(--ease)} a.start-hi:hover .start-go{background:color-mix(in srgb,var(--accent) 86%,var(--text))} .start-tag{position:absolute; top:clamp(18px,2.4vw,26px); inset-inline-end:clamp(18px,2.4vw,26px); font-size:11px; font-weight:650; padding:4px 10px; border-radius:var(--pill); white-space:nowrap; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 12%,transparent)} .start-mail{margin:24px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; font-size:14px} .start-mail .k{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)} .start-mail a{font-family:var(--mono); color:var(--text); direction:ltr} @media (max-width:560px){ .apps-row,.wire{gap:6px} .app{padding:12px 3px 10px} .app b{font-size:11.5px} .layer.core .globe{width:44px} .layer-tag{font-size:11.5px; padding:5px 10px} } /* Reduced motion: the journey in #how and the cards' stories are never started (app.js checks REDUCED before it adds .go), so what is left to stop is what runs on its own. */ @media (prefers-reduced-motion:reduce){ .globe .gm::before,.vault *{animation:none} } /* ── benchmark comparison ───────────────────────────────────────────────────────────────── */ .cmp{overflow:hidden; border-radius:var(--r-lg)} .cmp-head{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:14px clamp(14px,2vw,20px); border-bottom:1px solid var(--glass-line); background:color-mix(in srgb,var(--text) 2.5%,transparent)} .seg{display:inline-flex; gap:3px; padding:4px; border:1px solid var(--glass-line); border-radius:var(--pill); background:color-mix(in srgb,var(--bg) 60%,transparent)} .seg button{font-size:13px; font-weight:600; color:var(--muted); background:none; border:0; padding:7px 14px; border-radius:var(--pill); cursor:pointer; white-space:nowrap; transition:.16s var(--ease)} .seg button:hover{color:var(--text)} .seg button.on{background:var(--cta); color:var(--cta-ink)} .chips{display:flex; flex-wrap:wrap; gap:7px} .chips button{font-size:12.4px; font-weight:550; color:var(--muted); cursor:pointer; padding:6px 12px; border-radius:var(--pill); border:1px solid var(--glass-line); background:color-mix(in srgb,var(--bg) 50%,transparent); transition:.16s var(--ease)} .chips button:hover{color:var(--text); border-color:var(--border-2)} .chips button.on{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 10%,transparent)} .cmp-body{display:grid; grid-template-columns:240px 1fr; min-height:330px} .cmp-list{border-inline-end:1px solid var(--glass-line); padding:10px; display:flex; flex-direction:column; gap:2px; max-height:430px; overflow-y:auto} .cmp-list button{text-align:start; font-size:13.2px; font-weight:520; color:var(--muted); background:none; border:0; border-radius:10px; padding:9px 12px; cursor:pointer; transition:.15s var(--ease); display:flex; align-items:center; justify-content:space-between; gap:10px} .cmp-list button span{font-variant-numeric:tabular-nums; font-size:12.2px; color:var(--faint); font-family:var(--mono)} .cmp-list button:hover{background:color-mix(in srgb,var(--text) 5%,transparent); color:var(--text)} .cmp-list button.on{background:color-mix(in srgb,var(--accent) 11%,transparent); color:var(--accent); font-weight:640} .cmp-list button.on span{color:var(--accent)} .cmp-chart{padding:clamp(18px,2.4vw,26px) clamp(16px,2.6vw,30px)} .cmp-title{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:20px} .cmp-title h3{font-size:clamp(16px,2.2vw,20px); font-weight:650; letter-spacing:-.02em} .cmp-title i{font-style:normal; font-size:12.4px; color:var(--faint)} .cmp-title .lead-tag{margin-inline-start:auto; font-size:12px; font-weight:650; padding:4px 10px; border-radius:var(--pill); color:var(--ok-ink); border:1px solid color-mix(in srgb,var(--ok) 34%,transparent); background:color-mix(in srgb,var(--ok) 10%,transparent); white-space:nowrap} .brow{display:grid; grid-template-columns:168px 1fr 54px; align-items:center; gap:14px; padding:7px 0; animation:rowin .44s var(--ease) both} .brow em{font-style:normal; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .brow .track{height:10px; border-radius:var(--pill); background:color-mix(in srgb,var(--text) 6%,transparent); border:1px solid var(--glass-line); overflow:hidden} .brow .track i{display:block; height:100%; width:0; border-radius:var(--pill); background:color-mix(in srgb,var(--text) 22%,transparent); transition:width .8s var(--ease)} .brow b{text-align:end; font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; font-family:var(--mono)} .brow.us em{color:var(--text); font-weight:680} .brow.us .track{border-color:color-mix(in srgb,var(--accent) 40%,transparent)} .brow.us .track i{background:var(--grad)} .brow.us b{color:var(--text); font-weight:700} /* the other tier: ours too, so it is not left looking like a competitor — but half the weight */ .brow.ours em,.brow.ours b{color:var(--text)} .brow.ours .track{border-color:color-mix(in srgb,var(--accent) 24%,transparent)} .brow.ours .track i{background:color-mix(in srgb,var(--accent) 42%,transparent)} .brow.na .track{opacity:.5} .brow.na b{color:var(--faint); font-weight:500} /* the highest figure, whoever holds it: bold, on a line whose faint glow fades up through the number — as the card's tables mark it (tools/card_best.py), in this page's accent */ .brow.top em,.brow.top b{color:var(--text); font-weight:700} .brow.top b{justify-self:end; padding:0 3px 3px; border-bottom:1px solid var(--accent); background:linear-gradient(to top,color-mix(in srgb,var(--accent) 22%,transparent),transparent)} @keyframes rowin{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .brow{animation:none} .brow .track i{transition:none} } .cmp-foot{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between; padding:13px clamp(14px,2vw,20px); border-top:1px solid var(--glass-line); color:var(--faint); font-size:12.2px} .cmp-foot b{color:var(--accent); font-weight:600} .cmp-foot a{color:var(--accent); font-weight:600} @media (max-width:860px){ .cmp-body{grid-template-columns:1fr; min-height:0} .cmp-list{flex-direction:row; overflow-x:auto; overflow-y:hidden; max-height:none; gap:6px; border-inline-end:0; border-bottom:1px solid var(--glass-line); padding:10px clamp(12px,3vw,16px); scrollbar-width:none} .cmp-list::-webkit-scrollbar{display:none} .cmp-list button{white-space:nowrap; border:1px solid var(--glass-line); padding:8px 13px; font-size:12.6px; border-radius:var(--pill)} .cmp-list button span{display:none} } @media (max-width:520px){ .cmp-head{gap:10px} .brow{grid-template-columns:104px 1fr 44px; gap:9px} .brow em{font-size:12px; white-space:normal; line-height:1.22} .brow b{font-size:12px} .cmp-title .lead-tag{margin-inline-start:0} } /* ── code ───────────────────────────────────────────────────────────────────────────────── */ .tabs{display:flex; gap:3px; padding:4px; border:1px solid var(--glass-line); border-radius:var(--pill); background:var(--glass); width:max-content; max-width:100%; overflow-x:auto} .tabs button{font-size:13px; font-weight:600; color:var(--muted); background:none; border:0; padding:7px 14px; border-radius:var(--pill); cursor:pointer; white-space:nowrap; transition:.16s var(--ease)} .tabs button.on{background:var(--cta); color:var(--cta-ink)} .codebox{position:relative; margin-top:14px; border-radius:var(--r); overflow:hidden; direction:ltr; text-align:left} .codebox pre{margin:0; padding:22px; overflow-x:auto; font-family:var(--mono); font-size:12.8px; line-height:1.75} /* COPY, ON A CODE BOX: no outline of its own — a soft pill of the box's own light — and a tick with "Copied" in its place for a moment once it has copied (apiCopy). On a one-line box it stands in the middle of the box's height, whatever the line wraps to; on a phone the line starts under it. */ .codebox .cp{position:absolute; top:10px; inset-inline-end:10px; display:grid; gap:7px; padding:8px 14px; border:0; border-radius:var(--pill); cursor:pointer; font:inherit; font-size:13px; font-weight:600; line-height:1.2; color:var(--text); background:color-mix(in srgb,var(--text) 9%,transparent); transition:background-color .18s var(--ease), color .18s var(--ease), scale .12s var(--ease)} .codebox .cp svg{width:14px; height:14px; flex:0 0 auto} .codebox .cp:hover{background:color-mix(in srgb,var(--text) 15%,transparent)} .codebox .cp:active{scale:.96} .codebox .cp:focus-visible{border-radius:var(--pill); outline-offset:2px} .codebox .cp.copied{color:var(--ok-ink); background:color-mix(in srgb,var(--ok) 15%,transparent)} .codebox.one .cp{top:50%; translate:0 -50%} /* The box is code, so it reads left to right and the button keeps to its right-hand end; the words inside the button are the page's, so in Arabic the tick comes first, on the right of "تم النسخ". The direction goes on the words, not on the button: on the button it would flip which end inset-inline-end means, and the button would cross the box onto the start of the command. */ [dir="rtl"] .codebox .cp>span{direction:rtl} /* A box of several lines has a bar of its own on top — what the code is on one side, Copy on the other — so the button never lies over the code: "…/chat/completions \" ran under it, and the words showed through the button. The same bar the walkthroughs' code blocks have further down. */ .codebox-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 8px 8px 22px; border-bottom:1px solid var(--glass-line)} .codebox-top .lang{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)} .codebox-top .cp{position:static} /* Both words of a Copy button share one cell, so the button is as wide as the longer one and nothing moves when "Copied" takes over; the hidden word is hidden from a screen reader too (visibility). */ .cp-a,.cp-b{grid-area:1/1; display:inline-flex; align-items:center; justify-content:center; gap:inherit; transition:opacity .16s var(--ease), visibility .16s} .cp-b,.copied>.cp-a{visibility:hidden; opacity:0} .copied>.cp-b{visibility:visible; opacity:1} /* A ONE-LINE COMMAND WRAPS RATHER THAN SCROLLS. Every other box here holds several lines, so the Copy button has empty space to sit in; a single line runs straight under it, and the end of the command would sit off the side, where nobody looks for it. Wide enough, the line stops short of the button; on a phone there is no width to give away, so it starts underneath it. */ .codebox.one pre{white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:visible; padding-inline-end:128px} @media (max-width:560px){ .codebox.one pre{padding-inline-end:22px; padding-top:58px} .codebox.one .cp{top:10px; translate:none} } .codebox .k{color:var(--accent-2)} .codebox .s{color:var(--accent)} .codebox .c{color:var(--faint)} /* ── tables ─────────────────────────────────────────────────────────────────────────────── */ .tbl-wrap{overflow-x:auto; border:1px solid var(--glass-line); border-radius:var(--r); background:var(--glass); box-shadow:inset 0 1px 0 var(--glass-hi)} table.t{width:100%; border-collapse:collapse; font-size:13.6px; min-width:520px} @media (max-width:560px){ table.t.t-fit{min-width:0; font-size:13px} table.t.t-fit th,table.t.t-fit td{padding:11px 9px; white-space:normal} table.t.t-fit .th-long{display:none} /* A table that scrolls sideways keeps its label column readable instead of one word per line. */ table.t:not(.t-fit) td:first-child{min-width:190px} } table.t th{text-align:start; font-weight:600; color:var(--muted); padding:13px 16px; border-bottom:1px solid var(--glass-line); background:color-mix(in srgb,var(--text) 3%,transparent); white-space:nowrap} table.t td{padding:12px 16px; border-bottom:1px solid var(--glass-line); color:var(--muted)} table.t tr:last-child td{border-bottom:0} table.t td:first-child{color:var(--text); font-weight:550} table.t code{font-size:12.4px; padding:2px 6px; border-radius:5px; background:var(--surface-2)} .model-names{margin:14px 0 0; font-size:13.5px; color:var(--muted)} .sub-h:first-child{margin-top:0} /* The first Tab on any page: past the bar, straight to the page. Off screen until focused. */ .skip{position:fixed; top:-64px; inset-inline-start:var(--pad); z-index:80; padding:10px 16px; border-radius:var(--pill); background:var(--cta); color:var(--cta-ink); font-weight:600; font-size:14px; text-decoration:none} .skip:focus{top:calc(env(safe-area-inset-top) + 12px)} main:focus{outline:none} .rows.tl b.k{text-transform:none; letter-spacing:-.005em; font-size:13px; font-weight:650; color:var(--text)} .mt-sub{margin-top:clamp(40px,5vw,64px)} .sub-h{font-family:var(--head); font-weight:700; font-size:clamp(20px,2.3vw,27px); letter-spacing:-.025em; margin:clamp(40px,5vw,64px) 0 16px; line-height:1.2} /* ── spec list ──────────────────────────────────────────────────────────────────────────── */ .specs{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--glass-line); border:1px solid var(--glass-line); border-radius:var(--r); overflow:hidden; margin:0} @media (max-width:700px){ .specs{grid-template-columns:1fr} } @media (min-width:980px){ .specs.g4{grid-template-columns:repeat(4,1fr)} } .specs>div{background:color-mix(in srgb,var(--bg) 82%,transparent); padding:16px 20px} .specs dt{font-size:11px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.08em} .specs dd{margin:8px 0 0; font-size:14.6px; font-weight:550} .specs dd code{font-size:13px} /* ── contact ────────────────────────────────────────────────────────────────────────────── */ .field{display:block; margin-bottom:14px; position:relative} /* the country list is positioned against it */ .field span{display:block; font-size:12.6px; font-weight:600; color:var(--muted); margin-bottom:7px} .field input,.field textarea,.field select{width:100%; font-family:inherit; font-size:14.4px; color:var(--text); background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-sm); padding:12px 14px; outline:none; transition:.16s var(--ease)} .field textarea{min-height:132px; resize:vertical; line-height:1.6} .field input:focus,.field textarea:focus,.field select:focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--glass-line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)} /* THE ARROW ON A SELECT. Left alone, the browser paints its own chevron hard against the right border — it reads as clipped, and it ignores the field's own padding. `appearance:none` takes that arrow away and the background below draws ours, inset by the same 14px the text is, and on the correct side in Arabic. Any : a native one cannot be typed into beyond its first letter. */ .tel-pop{position:absolute; z-index:40; inset-inline-start:0; margin-top:6px; width:min(330px,100%); background:var(--elev); border:1px solid var(--border-2); border-radius:13px; box-shadow:var(--shadow); overflow:hidden; direction:ltr} .tel-pop[hidden]{display:none} .tel-q{width:100%; font-family:inherit; font-size:13.6px; color:var(--text); background:var(--surface-2); border:0; border-bottom:1px solid var(--border); padding:11px 13px; outline:none} .tel-q::placeholder{color:var(--faint)} .tel-list{max-height:246px; overflow-y:auto; overscroll-behavior:contain; padding:5px} .tel-list button{display:flex; align-items:center; gap:9px; width:100%; border:0; background:none; font:inherit; font-size:13.6px; color:var(--text); text-align:left; padding:8px 9px; border-radius:8px; cursor:pointer} .tel-list button:hover,.tel-list button.on{background:var(--surface-2)} .tel-list button .flag{font-size:16px; line-height:1; flex:0 0 auto} .tel-list button .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .tel-list button .dial{color:var(--faint); font-variant-numeric:tabular-nums; flex:0 0 auto} .tel-none{padding:16px 13px; font-size:13px; color:var(--faint); text-align:center} /* The honeypot. Off screen rather than display:none — a form filler that skips hidden inputs still fills this one, which is the whole point of it. */ /* Still in the page, still filled by bots — and nothing sits off-screen. At left:-9999px it was off the far edge of a right-to-left page, which made /ar/contact ten thousand pixels wide. */ .hp{position:absolute; top:0; inset-inline-start:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; opacity:0; pointer-events:none} /* One line under the button that says what happened. It holds the height whether or not it has anything to say, so a result does not shove the page. */ .cf-note{min-height:1.3em; margin:12px 0 0; font-size:13.2px; line-height:1.5; color:var(--muted)} .cf-note.ok{color:var(--ok-ink)} .cf-note.bad{color:var(--danger-ink)} .btn[disabled]{opacity:.6; pointer-events:none} /* ── the API page ───────────────────────────────────────────────────────────────────────────── Prose mirrors with the page; CODE NEVER DOES. `.api-v` and everything inside the key box that holds a value — the key itself, its prefix, a model id — is pinned LTR whichever way the document is running, because a base URL read right-to-left is a base URL somebody pastes wrong. See the same rule in the Playground's own panel. */ /* The nav is `position:fixed`, so an in-page jump lands the heading UNDER it. Everything else on this site is reached by a route, which scrolls to the top and has no such problem; this page is the first with an anchor of its own (`Get a key` → #get-a-key), so the offset is stated here. */ #get-a-key{scroll-margin-top:calc(var(--nav-top) + 18px)} .api-v{direction:ltr; unicode-bidi:isolate; text-align:start} [dir="rtl"] .api-v{text-align:right} @media (max-width:760px){ .field input,.field textarea,.field select,.tel-q{font-size:16px} } [dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"]{direction:ltr; text-align:right} .api-ep td:first-child{white-space:nowrap} .api-ep td:first-child code{font-size:12.4px; direction:ltr; unicode-bidi:isolate; display:inline-block} /* THE FIRST SCREEN wears the horizon /company and /contact open on: the title, the three steps in one panel in front of the planet, and the ten tools on the planet under it. So it is the same dark island in the light theme, and the eye goes down one column, in the order the work is done. */ .api-code-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:0 clamp(14px,1.6vw,20px) 8px clamp(14px,1.6vw,20px)} .api-run-c .api-code-bar .tabs{margin:0; max-width:100%} .api-code-acts{display:flex; gap:6px; direction:ltr} .api-code-acts .cp{display:grid; gap:7px; padding:7px 13px; border:0; border-radius:var(--pill); cursor:pointer; color:var(--text); font-size:13px; font-weight:600; background:color-mix(in srgb,var(--text) 9%,transparent); transition:background .16s var(--ease), color .16s var(--ease)} .api-code-acts .cp svg{width:14px; height:14px; flex:0 0 auto} .api-code-acts .cp:hover{background:color-mix(in srgb,var(--text) 15%,transparent)} .api-code-acts .cp:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .api-code-acts .cp.copied{color:var(--ok-ink); background:color-mix(in srgb,var(--ok) 15%,transparent)} .api-eye{grid-auto-flow:column; align-items:center} [dir="rtl"] .api-code-acts .cp>span{direction:rtl} .api-code-acts .api-eye.on{color:var(--bg); background:var(--accent)} .api-k{padding:1px 3px; border-radius:4px; color:var(--bg); background:var(--accent)} .api-conn{width:min(780px,100%); margin:clamp(20px,2.4vw,28px) auto 0; text-align:start} #apiConn .codebox.one{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:6px 8px 8px; border:0; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none} #apiConn .codebox.one pre{flex:1 1 300px; min-width:0; padding:9px 10px; font-size:13.4px; text-wrap:balance} #apiConn .codebox .cp{position:static; flex:none; translate:none} .api-how{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:10px 0 0; padding:0; overflow:hidden; list-style:none; border:1px solid var(--glass-line); border-radius:16px; background:var(--glass-line)} .api-how li{min-width:0; padding:14px 16px; background:var(--bg); color:var(--muted); font-size:13.6px; line-height:1.75} .api-how b{color:var(--text); font-weight:650} .api-how p{margin:0} /* ═══ /api is tiles ═══ one screen of tiles (a bento), each tile's size saying how much it matters. A tile is the one card: what sits inside it drops its own frame, so never a card inside a card. The DOM is in the order a wide screen reads it; on a narrow one `order` puts the tiles back in the owner's order: key, code, Connect, tools, usage. */ .bento .bt .api-sub-h .who{flex-basis:100%; margin:0} [dir="rtl"] .bento .bt .api-sub-h .who{text-align:right} /* The head and the tiles speak /pricing's language: the same display heading and lead, and every tile is a pricing card — one hue washed down from its top edge, a hairline of light on that edge. The key is the first thing to do, so its tile alone wears the accent, the way Max does there. */ .bento-wrap{padding:0 var(--pad) clamp(56px,7vw,96px)} .bento-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 24px; padding-block:clamp(44px,6vw,84px) clamp(24px,3vw,40px)} .bento-top .sec{margin:0; font-size:clamp(34px,4.4vw,60px); letter-spacing:-.035em; line-height:1.04} [lang="ar"] .bento-top .sec{letter-spacing:0} .bento-top p{margin:16px 0 0; max-width:60ch; color:var(--muted); font-size:clamp(16px,1.5vw,18px); line-height:1.6} .bento-plan{width:min(100%,288px); margin-inline-start:auto; padding:14px 16px; border:1px solid var(--glass-line); border-radius:var(--r-sm); background:var(--tile)} .bento-plan:empty{display:none} .bento-plan:has(>.btn){width:auto; padding:0; border:0; background:none} .bento-plan-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; font-size:13.8px} .bento-plan-h b{font-weight:650} .bento-plan-h a{color:var(--accent); font-size:13.4px; font-weight:600} .bento-plan .ac-bar{margin-top:8px} .bento-plan .ac-bar p{display:flex; justify-content:space-between; gap:8px; margin:0 0 6px; font-size:12.6px} :root{--tile:color-mix(in srgb,var(--text) 3.5%,var(--bg))} .bento{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(12px,1.2vw,16px); align-items:stretch} .bt{--wash:var(--text); --wa:5%; position:relative; min-width:0; padding:clamp(20px,1.8vw,26px); border:1px solid var(--glass-line); border-radius:var(--r); background:linear-gradient(to bottom,color-mix(in srgb,var(--wash) var(--wa),var(--bg)),color-mix(in srgb,var(--text) 2%,var(--bg)) 340px); scroll-margin-top:calc(var(--nav-top) + 16px)} .bt::before{content:""; position:absolute; top:0; inset-inline:14%; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--wash) 60%,transparent),transparent)} .bt-key{--wash:var(--accent); --wa:14%; border-color:color-mix(in srgb,var(--accent) 42%,transparent)} .bt-key{grid-column:span 5} .bt-use{grid-column:span 7} .bt-conn{grid-column:span 7} .bt-lim{grid-column:span 5} .bt-tools,.bt-inc{grid-column:span 12} .bt-code,.bt-ref{grid-column:span 7} .bt-stack,.bt-faq{grid-column:span 5} .bt-stack{display:grid; gap:clamp(12px,1.2vw,16px); align-content:start} .bento[data-in="0"] [data-signed]{display:none} .bento[data-in="0"] .bt-conn{grid-column:span 12} .bt-h{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; margin-bottom:20px} .bt-t{flex:1 1 240px; min-width:0} .bt-h h2{margin:0; font-family:var(--head); font-size:clamp(21px,1.8vw,26px); font-weight:700; letter-spacing:-.025em; line-height:1.15; text-wrap:balance} [lang="ar"] .bt-h h2{font-family:var(--font-ar); letter-spacing:0; line-height:1.35} .bt-h p{margin:8px 0 0; max-width:62ch; color:var(--muted); font-size:14.5px; line-height:1.55} .bt-h .tabs{flex:none; margin:0} .bt-h .tabs[hidden]{display:none} /* What moves into a tile loses the frame it wore on its own. */ .bento .bt #apiKeyBox{margin:0; overflow:visible; border:0; border-radius:0; background:none} .bento .bt #apiKeyBox .api-join,.bento .bt #apiKeyBox>.api-panel-note,.bento .bt #apiKeyBox>.api-keyrow,.bento .bt #apiKeyBox>.api-sub,.bento .bt #apiKeyBox>.api-reveal,.bento .bt #apiKeyBox>.api-links,.bento .bt #apiKeyBox>.cf-note{padding-inline:0} .bento .bt #apiKeyBox .api-join,.bento .bt #apiKeyBox>.api-keyrow{padding-top:0} .bento .bt #apiKeyBox>#keyReveal{margin:0; margin-inline-start:16px} .bento .bt #apiKeyBox>.api-links{padding-bottom:0} .bt .api-bench,.bt .api-cn-win{margin:0; background:var(--bg)} .bt .api-how li{background:var(--bg)} .bt .api-use{margin:0; gap:18px} .bt .use-kpi{gap:0; border:0; border-radius:0; background:none} .bt .use-kpi>div{padding:2px 16px; background:none; border-inline-start:1px solid var(--glass-line)} .bt .use-kpi>div:first-child{padding-inline-start:0; border-inline-start:0} .bt .uc,.bt .use-lim{padding:0; border:0; border-radius:0; background:none} .bt .use-lim .ac-bar:first-child{margin-top:0} .bt .use-out{border:0; padding:clamp(26px,4vw,46px) 12px} .bt .api-tools{margin-top:0} .bt .api-conn{width:auto; margin:0} .bt .api-conn .api-pc{margin-top:0} .bt .api-guide{margin:0; border:0; border-radius:0; background:none; box-shadow:none} .bt .api-gtop,.bt .api-guide>.api-guidelede{padding-inline:0} .bt .api-facts{margin:0; border-top:0} .bt .api-facts>div{padding-inline:0} .bt .api-facts>div:first-child{padding-top:0} .bt .pl-faq{margin:0} .bt .faq-i:last-child{border-bottom:0} .bt .api-lim{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:0} .bt .api-lim>div{display:block; padding:2px 20px; border:0; border-inline-start:1px solid var(--glass-line)} .bt .api-lim>div:first-child{padding-inline-start:0; border-inline-start:0} .bt .api-lim .api-fig{display:block; margin-bottom:10px; font-size:clamp(30px,3vw,40px)} .bt .api-lim b{display:block} @media (max-width:1100px){ .bento>.bt,.bt-stack>.bt{grid-column:1 / -1} .bt-stack{display:contents} .bt-key{order:1} .bt-code{order:2} .bt-facts{order:3} .bt-conn{order:4} .bt-tools{order:5} .bt-use{order:6} .bt-lim{order:7} .bt-req{order:8} .bt-inc{order:9} .bt-ref{order:10} .bt-faq{order:11} .bt .api-lim{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px} .bt .api-lim>div:nth-child(odd){padding-inline-start:0; border-inline-start:0} } @media (max-width:640px){ .bt{padding:16px; border-radius:18px} .bento-plan{width:100%} .bt .use-kpi{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:16px} .bt .use-kpi>div:nth-child(odd){padding-inline-start:0; border-inline-start:0} .bento .bt #apiKeyBox>#keyReveal{margin:0 0 14px} } /* The key: one card, the state of the key on its first line and everything else under a hairline. */ #apiKeyBox{margin-top:10px; overflow:hidden; border:1px solid var(--glass-line); border-radius:14px; background:var(--bg-2)} #apiKeyBox .api-join,#apiKeyBox>.api-panel-note{padding:16px 18px} #apiKeyBox>.api-panel-note{margin:0} #apiKeyBox[data-stage="ready"]{display:grid; grid-template-columns:minmax(0,1fr) auto} #apiKeyBox[data-stage="ready"]>*{grid-column:1 / -1; margin:0} #apiKeyBox>.api-keyrow{grid-column:1; grid-row:1; padding:15px 18px; border:0; border-radius:0; background:none; margin:0} #apiKeyBox>#keyReveal{grid-column:2; grid-row:1; align-self:center; width:auto; margin:0 18px; padding:9px 18px; font-size:13.6px} #apiKeyBox>.api-sub:not(.api-keyrow),#apiKeyBox>.api-reveal,#apiKeyBox>.api-links{padding:13px 18px; border:0; border-top:1px solid var(--glass-line); border-radius:0; background:none} #apiKeyBox>.api-sub{margin:0} #apiKeyBox>.api-sub:not(.api-keyrow){display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 20px; align-items:center} #apiKeyBox>.api-sub:not(.api-keyrow)>*{grid-column:1; margin:0} #apiKeyBox>.api-sub:not(.api-keyrow)>.btn{grid-column:2; grid-row:1 / span 2; width:auto} #apiKeyBox .api-prefix code{font-size:15px} #apiKeyBox>.cf-note{margin:0; padding:0 18px 14px} #apiKeyBox>.cf-note:empty{display:none} /* The code: one window, the samples' tabs and buttons on its top edge and the reply on its foot. */ .api-bench{margin-top:12px; overflow:hidden; border:1px solid var(--glass-line); border-radius:14px; background:var(--bg-2)} .api-code-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:8px 10px; border-bottom:1px solid var(--glass-line)} .api-code-bar .tabs{margin:0; max-width:100%} .api-code-bar .tabs button{padding:6px 12px; font-size:13px} .api-bench .codebox{position:static; margin:0; border:0; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none} .api-bench .codebox pre{padding:16px 18px} .api-code-acts{display:flex; gap:6px; direction:ltr} .api-code-acts .cp{display:grid; gap:7px; padding:7px 13px; border:0; border-radius:var(--pill); cursor:pointer; color:var(--text); font-size:13px; font-weight:600; background:color-mix(in srgb,var(--text) 9%,transparent); transition:background .16s var(--ease), color .16s var(--ease)} .api-code-acts .cp svg{width:14px; height:14px; flex:0 0 auto} .api-code-acts .cp:hover{background:color-mix(in srgb,var(--text) 15%,transparent)} .api-code-acts .cp:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .api-code-acts .cp.copied{color:var(--ok-ink); background:color-mix(in srgb,var(--ok) 15%,transparent)} .api-eye{grid-auto-flow:column; align-items:center} [dir="rtl"] .api-code-acts .cp>span{direction:rtl} .api-code-acts .api-eye.on{color:var(--bg); background:var(--accent)} .api-k{padding:1px 3px; border-radius:4px; color:var(--bg); background:var(--accent)} /* Connect: the line in one window, its two buttons at its end. */ .api-cn-win{overflow:hidden; border:1px solid var(--glass-line); border-radius:14px; background:var(--bg-2)} .api-cn-win .tabs{margin:8px 8px 0} .api-cn-win .tabs button{padding:6px 13px; font-size:13px} #apiConn .codebox.one{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:6px 8px 8px; border:0; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none} #apiConn .codebox.one pre{flex:1 1 300px; min-width:0; padding:9px 10px; font-size:13.4px; text-wrap:balance} #apiConn .codebox .cp{position:static; flex:none; translate:none} #apiHow{margin-top:8px} .api-gos{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 0; border-bottom:1px solid var(--glass-line)} .api-gos>span{color:var(--muted); font-size:13.4px} .api-gos .tabs{margin:0} .api-gos .tabs button{padding:6px 13px; font-size:13px} .api-how{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:8px 0 0; padding:0; overflow:hidden; list-style:none; border:1px solid var(--glass-line); border-radius:14px; background:var(--glass-line)} .api-how li{min-width:0; padding:13px 15px; background:var(--bg-2); color:var(--muted); font-size:13.6px; line-height:1.75} .api-how b{color:var(--text); font-weight:650} .api-how p{margin:0} .api-tools{display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:8px; margin-top:12px} .api-tool{flex-direction:row; justify-content:flex-start; gap:11px; padding:10px 12px; border-radius:12px; text-align:start} .api-tool .ic.logo{flex:0 0 36px; width:36px; height:36px; border-radius:10px} .api-tool:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)} @media (max-width:900px){ .api-how{grid-template-columns:minmax(0,1fr)} } @media (max-width:640px){ .api-join{grid-template-columns:minmax(0,1fr); gap:10px} .api-box .api-join .btn{grid-column:1; grid-row:auto; justify-self:start} #apiKeyBox[data-stage="ready"]{grid-template-columns:minmax(0,1fr)} #apiKeyBox>#keyReveal{grid-column:1; grid-row:auto; margin:0 18px 14px; justify-self:start} #apiKeyBox>.api-sub:not(.api-keyrow){grid-template-columns:minmax(0,1fr)} #apiKeyBox>.api-sub:not(.api-keyrow)>.btn{grid-column:1; grid-row:auto; justify-self:start; margin-top:8px} } /* "Not on a phone" — said on a phone, where it is news. On a computer it is only one more line. */ .api-conn .api-pc{display:flex; align-items:center; gap:10px; margin:12px 0 16px; padding:11px 14px; border-radius:var(--r-sm); font-size:13.8px; line-height:1.5; color:var(--text); border:1px solid color-mix(in srgb,var(--accent) 34%,var(--glass-line)); background:color-mix(in srgb,var(--accent) 9%,transparent)} @media (hover:hover) and (pointer:fine){ .api-conn .api-pc{display:none} } .api-conn .api-pc svg{width:19px; height:19px; flex:0 0 auto; color:var(--accent)} /* (The three-step list that stood here went with the 2026-11-07 redesign, and one line of its rule stayed behind with no selector. A stray line like that swallows the rule after it, so the "$ " prompt drawn before the command never showed; the owner approved the box without it, so it went too.) */ .api-open{margin-top:6px; font-size:13.4px; color:var(--muted)} .api-open summary{display:inline-block; cursor:pointer; padding:4px 0; color:var(--accent); font-weight:600; list-style:none} .api-open summary::-webkit-details-marker{display:none} kbd{display:inline-block; min-width:1.6em; padding:1px 7px; border-radius:6px; font-family:var(--font); font-size:.86em; font-weight:600; line-height:1.5; text-align:center; color:var(--text); background:var(--surface-2); border:1px solid var(--border-2); border-bottom-width:2px; direction:ltr; unicode-bidi:isolate; white-space:nowrap} /* Shown only where a finger is the pointer: the line cannot run there, the address can travel. */ .api-carry{display:none; margin-top:14px} @media (pointer:coarse){ .api-carry{display:inline-grid} } .api-carry .cp-a,.api-carry .cp-b{grid-area:1/1} .api-carry .cp-b{visibility:hidden} .api-carry.copied .cp-a{visibility:hidden} .api-carry.copied .cp-b{visibility:visible} /* The line names the app for the tab that is showing — setConn() writes data-os. */ #apiConn[data-os="sh"] [data-only="ps"], #apiConn[data-os="ps"] [data-only="sh"]{display:none} /* The questions: one hairline list, each answer folded under its question. */ .faq{border-top:1px solid var(--glass-line)} .faq-i{border-bottom:1px solid var(--glass-line)} .faq-i summary{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 2px; cursor:pointer; list-style:none; font-size:15.5px; font-weight:600; color:var(--text)} .faq-i summary::-webkit-details-marker{display:none} .faq-i summary svg{width:18px; height:18px; flex:0 0 auto; color:var(--muted); transition:transform .2s var(--ease)} .faq-i[open] summary svg{transform:rotate(180deg)} .faq-i p{margin:0 0 18px; max-width:70ch; font-size:14.5px; line-height:1.7; color:var(--muted)} /* The refusals are looked up, not read: one row, folded shut, opened by a chevron that needs no mirroring because it points down. */ /* The box itself. It is one card whose whole contents are replaced on every state change, so everything here is scoped to it rather than to the stage it belongs to. */ .api-box{margin-top:6px} .api-box>:last-child{margin-bottom:0} .api-box .cf-note:empty{display:none} .api-box-h{font-size:17px; margin:0 0 8px; letter-spacing:-.02em} .api-panel-note{margin:0 0 16px; color:var(--muted); font-size:13.6px; line-height:1.62} .api-box .field{margin:14px 0 12px} .api-box .btn{width:100%} /* Six digits, spaced out and centred, so the box looks like the thing it is asking for. */ .api-otp{font-family:var(--mono); font-size:20px; letter-spacing:.42em; text-align:center; direction:ltr; padding-inline-start:calc(14px + .42em)} .api-links{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-top:12px} .api-link{background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--accent); transition:.14s var(--ease)} .api-link:hover{color:var(--text)} .api-link[disabled]{color:var(--faint); cursor:default} /* The value, once. Monospace, selectable, and wrapped rather than clipped — a key with its tail cut off is a key somebody copies and cannot use. */ .api-reveal{margin:0 0 16px; padding:16px; border-radius:var(--r-sm); border:1px solid color-mix(in srgb,var(--ok) 34%,var(--glass-line)); background:color-mix(in srgb,var(--ok) 8%,transparent)} .api-reveal h4{display:flex; align-items:center; gap:8px; margin:0 0 7px; font-size:15px; color:var(--ok-ink)} .api-reveal h4 svg{width:16px; height:16px; flex:0 0 auto} .api-reveal p{margin:0 0 12px; font-size:13.2px; line-height:1.6; color:var(--muted)} /* Expired is not a success, so it does not wear the green tick: the warning ink, and the way to the people who renew it. */ .api-reveal.ended{border-color:color-mix(in srgb,var(--warn) 38%,var(--glass-line)); background:color-mix(in srgb,var(--warn) 9%,transparent)} .api-reveal.ended h4{color:var(--warn-ink)} .api-reveal.ended p:last-child{margin-bottom:0} .api-reveal.ended a{color:var(--text); font-weight:650; text-decoration:underline; text-underline-offset:2px} /* THE KEY AND ITS COPY BUTTON ARE ONE FIELD: the value, and a small pill at its end — the same pill the command box under it has. It was a full-width white bar with "Copy key" off centre, because the redesign of 2026-11-07 took these rules' first lines with it: the button lost its grid, so both of its words sat side by side, one of them hidden, and "Copied" landed on the other half. Both words share one cell now, so the button is as wide as the longer one and "Copied" appears where "Copy" was. The account page's key uses the same pill (.ac-secret). */ .api-secret{display:flex; align-items:center; gap:10px; direction:ltr; padding:6px 6px 6px 13px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--glass-line)} .api-secret code{flex:1; min-width:0; font-family:var(--mono); font-size:12.8px; line-height:1.5; overflow-wrap:anywhere; user-select:all; color:var(--text)} .api-secret .cp,.ac-secret .cp{flex:0 0 auto; display:inline-grid; gap:6px; padding:7px 12px; border:0; border-radius:var(--pill); cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; line-height:1.2; color:var(--text); background:color-mix(in srgb,var(--text) 9%,transparent); transition:background-color .18s var(--ease), color .18s var(--ease), scale .12s var(--ease)} .api-secret .cp svg,.ac-secret .cp svg{width:13px; height:13px; flex:0 0 auto} .api-secret .cp:hover,.ac-secret .cp:hover{background:color-mix(in srgb,var(--text) 15%,transparent)} .api-secret .cp:active,.ac-secret .cp:active{scale:.96} .api-secret .cp:focus-visible,.ac-secret .cp:focus-visible{outline-offset:2px} .api-secret .cp.copied,.ac-secret .cp.copied{color:var(--ok-ink); background:color-mix(in srgb,var(--ok) 15%,transparent)} [dir="rtl"] .api-secret .cp>span{direction:rtl} .api-sub{margin:0 0 14px; padding:15px 16px; border-radius:var(--r-sm); border:1px solid var(--glass-line); background:color-mix(in srgb,var(--bg) 55%,transparent)} .api-sub>b{display:block; font-size:14px; color:var(--text)} .api-sub p{margin:7px 0 0; font-size:13px; line-height:1.6; color:var(--muted)} .api-sub .api-panel-note{margin:8px 0 0; font-size:12.4px} .api-sub .btn{width:auto; margin-top:12px} .api-sub-h{display:flex; align-items:center; gap:9px; flex-wrap:wrap} .api-sub-h b{font-size:14px; color:var(--text)} .api-sub-h .who{margin-inline-start:auto; font-size:12px; color:var(--faint); direction:ltr; unicode-bidi:isolate; overflow-wrap:anywhere} .api-pill{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:640; padding:3px 9px; border-radius:var(--pill); white-space:nowrap; color:var(--ok-ink); background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)} .api-pill svg{width:12px; height:12px} .api-pill.warn{color:var(--warn-ink); background:color-mix(in srgb,var(--warn) 13%,transparent); border-color:color-mix(in srgb,var(--warn) 32%,transparent)} .api-pill.off{color:var(--faint); background:transparent; border-color:var(--glass-line)} .api-prefix{margin-top:10px} .api-prefix code{font-family:var(--mono); font-size:12.6px; color:var(--text)} .api-models{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px} .api-models span{direction:ltr; unicode-bidi:isolate; font-family:var(--mono); font-size:11.4px; padding:4px 9px; border-radius:var(--pill); color:var(--faint); border:1px solid var(--glass-line)} /* Every model on this list is one the key opens, so every one of them wears the same accent. Before, only ours had it and the hosted models sat in a plainer colour directly under a line saying they were open, so every name on the key is lit exactly like the first. */ .api-models span.on{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 42%,transparent); background:color-mix(in srgb,var(--accent) 9%,transparent)} /* The Telegram square. Drawn as one SVG path by the controller (lib/qr.js) rather than fetched from a QR service — the page's own policy names two origins and neither of them is one. It is kept on a white plate whatever the theme, because a dark-on-dark square does not scan. */ .api-qr{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; margin-top:12px} /* 190, not 150. A version-5 code is 37 modules wide and the quiet zone makes it 45, so a 150px box left each module 2.9 CSS pixels — readable to a decoder handed a clean bitmap, and thin for a phone camera pointed at a screen at arm's length, through glare, slightly off-axis. This gives it just under 4. The square was unreadable for a different reason entirely (lib/qr.js wrote the format information transposed); this is the margin that should have been there anyway. */ .api-qr .sq{width:190px; height:190px; flex:0 0 auto; padding:9px; border-radius:11px; background:#fff} .api-qr .sq svg{width:100%; height:100%; display:block} .api-qr .sq path{fill:#000} .api-qr-steps{flex:1 1 210px; min-width:0; margin:0; padding-inline-start:18px; font-size:12.8px; line-height:1.6; color:var(--muted)} .api-qr-steps li{margin:0 0 8px} .api-wait{display:inline-flex; align-items:center; gap:7px; margin:12px 0 0; font-size:12.5px; color:var(--muted)} .api-wait i{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto; animation:stBlink 1.5s ease-in-out infinite} @media (prefers-reduced-motion:reduce){ .api-wait i{animation:none} } /* Where the visitor is in the three actions — three words, the current one lit. */ .api-progress{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 14px; font-size:12.5px; font-weight:600; color:var(--faint)} .api-progress .on{color:var(--text)} .api-progress i{font-style:normal; opacity:.7} .api-lede{margin-bottom:14px; font-size:14px; color:var(--muted)} .api-spam{margin:-4px 0 14px; font-size:12.8px} .api-typo{display:block; margin:-4px 0 12px; font-size:13px} .api-otp:disabled{opacity:.45} .api-show{margin-bottom:14px} .api-join{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 24px; align-items:center} .api-join .api-lede,.api-join .api-have{grid-column:1; margin:0} .api-join .api-lede{color:var(--text); font-size:14.8px} .api-join .api-have a{color:var(--accent); font-weight:600} .api-box .api-join .btn{grid-column:2; grid-row:1 / span 2; width:auto; padding-inline:24px} /* The key's own copy button carries both of its words, so "Copied" appears where it was pressed. */ .api-next{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13.5px; color:var(--text)} a.api-next{color:var(--accent); font-weight:600} .api-tg{width:100%; margin-top:12px} .api-qr-more{margin-top:10px; font-size:12.8px; color:var(--muted)} .api-qr-more summary{cursor:pointer; color:var(--accent); font-weight:600; padding:6px 0} /* ── the tool gallery, and the walkthrough it opens ─────────────────────────────────────── ONE CONTAINER, TWO STATES. #apiTools is the grid of fourteen and, once one is picked, that tool's guide — so the class is swapped rather than a second block being shown and hidden. THE WHOLE POINT IS THAT IT DOES NOT LOOK LIKE WORK. Somebody landing here is deciding whether pointing their editor at us is an afternoon or a minute, and a page can answer that before a word of it is read. So there is one box per step and not one inside another: the code sits on the page with a hairline round it, the reason is folded shut, and the rail down the numbers is the only decoration. Type is the site's, not a sidebar's. */ .api-tools{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:clamp(8px,.8vw,12px); margin-top:clamp(12px,1.6vh,16px)} .api-tool{display:flex; flex-direction:column; align-items:center; gap:9px; width:100%; min-width:0; padding:12px 6px 11px; cursor:pointer; border:1px solid var(--glass-line); border-radius:16px; background:color-mix(in srgb,var(--text) 5%,var(--bg)); color:inherit; font:inherit; text-align:center; transition:border-color .18s var(--ease), background .18s var(--ease)} .api-tool:hover{border-color:color-mix(in srgb,var(--text) 40%,transparent); background:color-mix(in srgb,var(--text) 10%,var(--bg))} .api-tool:focus-visible{outline:2px solid var(--accent); outline-offset:2px} @media (max-width:1180px){ .api-tools{grid-template-columns:repeat(5,minmax(0,1fr))} } @media (max-width:640px){ .api-tools{grid-template-columns:repeat(2,minmax(0,1fr))} .api-tool{flex-direction:row; padding:10px 12px; text-align:start} .api-tool .ic.logo{flex-basis:34px; width:34px; height:34px} } .api-tool .ic{flex:0 0 34px; height:34px; margin:0; border-radius:10px; display:grid; place-items:center; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.02em; direction:ltr; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)} /* `margin:0` above: the site-wide .ic carries a 16px bottom margin for cards, and in this row it lifted the tile 8px above the middle of every card. A tool's own logo sits on a neutral tile, not the accent one: three brand colours on blue squares fight the squares. The single-colour marks take their ink from `color` here, so they follow the theme; the fixed-colour ones ignore it. */ .api-tool .ic.logo,.api-guidehead .ic.logo{color:var(--text); background:color-mix(in srgb,var(--text) 5%,transparent); border-color:color-mix(in srgb,var(--text) 11%,transparent)} .api-tool .ic.logo{flex:0 0 40px; width:40px; height:40px; border-radius:12px} .api-tool .ic svg{width:20px; height:20px; display:block} .api-tool .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px} .api-tool .tx b{font-size:13.4px; font-weight:640; letter-spacing:-.01em; line-height:1.25; color:var(--text)} .api-tool .tx i{display:none} .api-tool .go{display:none} /* ── one guide ───────────────────────────────────────────────────────────────────────────── */ .api-guide{margin-top:12px; overflow:hidden; border:1px solid var(--glass-line); border-radius:var(--r); background:color-mix(in srgb,var(--text) 6%,var(--bg)); box-shadow:0 34px 70px -34px #000} .api-gtop{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:14px clamp(16px,2vw,24px); border-bottom:1px solid var(--glass-line)} .api-gtop .api-back{margin:0} .api-gtop .api-guidehead{flex:1 1 auto; min-width:0; margin:0} .api-gtop .api-ways{margin:0} .api-guide>.api-guidelede{margin:0; padding:14px clamp(16px,2vw,24px); border-bottom:1px solid var(--glass-line)} .api-gbody{display:grid; grid-template-columns:minmax(0,270px) minmax(0,1fr)} .api-grail{display:flex; flex-direction:column; gap:2px; padding:12px; border-inline-end:1px solid var(--glass-line)} .api-grail button{display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border:0; border-radius:12px; cursor:pointer; text-align:start; color:var(--muted); background:none; font-size:14.2px; font-weight:600; line-height:1.4; transition:background .16s var(--ease), color .16s var(--ease)} .api-grail button:hover{color:var(--text); background:color-mix(in srgb,var(--text) 6%,transparent)} .api-grail button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px} .api-grail button[aria-current]{color:var(--text); background:color-mix(in srgb,var(--accent) 12%,transparent)} .api-grail i{flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font-style:normal; font-size:12.4px; font-weight:700; border:1px solid var(--glass-line)} .api-grail i svg{width:13px; height:13px} .api-grail [aria-current] i{color:var(--bg); background:var(--accent); border-color:var(--accent)} .api-grail .done i{color:var(--ok-ink); border-color:color-mix(in srgb,var(--ok) 45%,transparent)} .api-grail code{font-family:var(--mono); font-size:12.6px} .api-gnav{display:flex; justify-content:flex-end; gap:8px; margin-top:20px} .api-gnav .btn{width:auto} .api-back{display:inline-flex; align-items:center; gap:5px; margin:0 0 20px; padding:6px 13px 6px 9px; border:1px solid var(--border); border-radius:999px; background:none; cursor:pointer; color:var(--muted); font:inherit; font-size:12.8px; transition:color .18s, border-color .18s} .api-back:hover{color:var(--text); border-color:var(--border-2)} .api-back svg{width:15px; height:15px} :root[dir="rtl"] .api-back svg{transform:scaleX(-1)} .api-guidehead{display:flex; align-items:center; gap:13px; margin:0 0 11px} .api-guidehead .ic{flex:0 0 44px; height:44px; margin:0; border-radius:13px; display:grid; place-items:center; font-family:var(--mono); font-size:14.5px; font-weight:700; direction:ltr; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)} .api-guidehead .ic svg{width:26px; height:26px; display:block} .api-guidehead>div{flex:1; min-width:0} .api-guidehead h3{margin:0; font-size:20px; font-weight:660; letter-spacing:-.022em} .api-guidehead .k{font-size:10.6px; letter-spacing:.055em; text-transform:uppercase; color:var(--faint)} /* "4 steps", said before the steps are read. It is the whole answer to "is this going to be a project", and it costs one pill. */ .api-count{flex:0 0 auto; align-self:flex-start; padding:4px 11px; border-radius:999px; font-size:11.4px; font-weight:600; color:var(--accent); white-space:nowrap; background:color-mix(in srgb,var(--accent) 11%,transparent); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)} .api-guidelede{margin:0; font-size:14.2px; line-height:1.72; color:var(--muted)} /* Which way in — terminal or extension. A segmented control, not tabs: the two are the same guide for the same tool, and one of them is already chosen. */ .api-ways{display:inline-flex; gap:4px; margin:0 0 24px; padding:4px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border)} .api-ways button{padding:7px 16px; border:none; border-radius:9px; background:none; cursor:pointer; color:var(--muted); font:inherit; font-size:12.8px; transition:background .18s, color .18s} .api-ways button.on{background:var(--elev); color:var(--text); box-shadow:0 1px 6px rgba(0,0,0,.22)} .api-ways button:hover:not(.on){color:var(--text)} /* The steps. The rail between the numbers is a ::before on every step but the last, which is why the number sits on an opaque plate — the line runs under it. */ .api-steps{list-style:none; margin:0; padding:0} .api-step{padding:clamp(18px,2.2vw,28px); animation:apiStepIn .24s var(--ease)} .api-step:not([data-on]){display:none} @keyframes apiStepIn{from{opacity:0; translate:0 6px}} .api-step .n{display:block; margin-bottom:6px; color:var(--accent); font-size:12.8px; font-weight:600} .api-step .b{min-width:0} .api-step h4{margin:0 0 8px; font-family:var(--head); font-size:clamp(18px,1.6vw,21px); font-weight:650; color:var(--text); line-height:1.5; letter-spacing:-.012em} .api-step p{margin:0 0 12px; font-size:14.2px; color:var(--muted); line-height:1.78} .api-step p:last-child{margin-bottom:0} .api-list{margin:8px 0 0; padding-inline-start:19px; font-size:13.4px; color:var(--muted); line-height:1.8} .api-list li{margin:0 0 5px} /* Inline in prose is text; a code BLOCK is a command, and a command is left-to-right. */ .api-step code,.api-guidelede code,.api-why code{font-family:var(--mono); font-size:12.3px; direction:ltr; unicode-bidi:isolate; padding:1px 5px; border-radius:5px; background:var(--surface-2); border:1px solid var(--border); color:var(--text)} .api-kbd{font-family:var(--mono); font-size:11.6px; direction:ltr; unicode-bidi:isolate; padding:2px 6px; border-radius:5px; background:var(--surface-2); border:1px solid var(--border)} /* A value to type into somebody else's form: shown, and copyable, because retyping a base URL by hand is where the typo comes from. */ .api-field{display:flex; align-items:center; gap:10px; margin:8px 0 0; padding:9px 11px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border)} .api-field .fk{flex:0 0 auto; font-size:10.2px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint)} .api-field .fv{flex:1; min-width:0; font-family:var(--mono); font-size:12.5px; color:var(--text); direction:ltr; unicode-bidi:isolate; overflow-x:auto; white-space:nowrap; scrollbar-width:none} .api-field .fv::-webkit-scrollbar{display:none} .api-cap{margin:10px 0 6px !important; font-size:12.6px} .api-code{margin:10px 0 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface)} .api-code-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 8px 6px 12px; border-bottom:1px solid var(--border)} .api-code-top .lang{font-family:var(--mono); font-size:10.2px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint)} .api-code pre{margin:0; padding:13px; overflow-x:auto; direction:ltr; unicode-bidi:isolate} .api-code code{padding:0; border:none; background:none; font-family:var(--mono); font-size:12.4px; line-height:1.75; color:var(--text)} /* The REASON a line is there, folded shut. Nineteen of these across the fourteen guides; all of them are worth keeping and none is worth reading before you have hit the thing it explains. */ .api-why{margin:11px 0 0} .api-why summary{display:inline-flex; align-items:center; gap:5px; cursor:pointer; list-style:none; font-size:12.4px; color:var(--faint); transition:color .18s} .api-why summary::-webkit-details-marker{display:none} .api-why summary::before{content:""; width:0; height:0; border-inline-start:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .18s} :root[dir="rtl"] .api-why summary::before{transform:scaleX(-1)} .api-why[open] summary::before{transform:rotate(90deg)} :root[dir="rtl"] .api-why[open] summary::before{transform:scaleX(-1) rotate(-90deg)} .api-why summary:hover{color:var(--text)} .api-why p{margin:8px 0 0 !important; padding-inline-start:11px; font-size:12.8px; line-height:1.75; border-inline-start:2px solid var(--border)} .copy{display:inline-grid; gap:6px; padding:5px 10px; cursor:pointer; border:1px solid transparent; border-radius:8px; background:none; color:var(--faint); font:inherit; font-size:11.4px; transition:color .18s, border-color .18s, background .18s} .copy:hover{color:var(--text); background:var(--surface-2)} .copy svg{width:13px; height:13px} .copy.copied{color:var(--ok-ink)} .copy.mini{padding:6px; gap:0} .copy.mini svg{width:14px; height:14px} @media (max-width:560px){ .api-guidehead{flex-wrap:wrap} .api-guidehead h3{font-size:18px} .api-guidehead .ic{flex-basis:38px; height:38px; font-size:13px} .api-guidehead .ic svg{width:22px; height:22px} } /* A phone is where somebody will actually be standing when they scan that square, so the two columns stack and the square keeps its size rather than shrinking below scanning range. */ @media (max-width:560px){ .api-qr .sq{width:100%; max-width:220px; height:auto; aspect-ratio:1} .api-otp{font-size:18px; letter-spacing:.3em; padding-inline-start:calc(14px + .3em)} } /* ── the model card (rendered from Markdown; English, left-to-right whatever the interface) ─ */ .doc-layout{display:grid; grid-template-columns:250px 1fr; gap:clamp(20px,3vw,42px); align-items:start} @media (max-width:960px){ .doc-layout{grid-template-columns:1fr} .doc-toc{display:none} } /* The card and its contents list are English by design (.doc is direction:ltr twenty lines down). Without the same on the list, "1. Download the model" rendered ". 1" first. */ .doc-toc{direction:ltr; position:sticky; top:calc(var(--nav-top) + 20px); max-height:calc(100vh - 130px); overflow-y:auto; padding-inline-end:6px} .doc-toc b{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; font-weight:600} .doc-toc a{display:block; font-size:13px; color:var(--muted); padding:5px 10px; border-inline-start:2px solid var(--glass-line); line-height:1.4; transition:.14s var(--ease)} .doc-toc a.sub{padding-inline-start:20px; font-size:12.4px} .doc-toc a:hover{color:var(--text)} .doc-toc a.on{color:var(--accent); border-inline-start-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent)} .doc{min-width:0; font-size:15px; line-height:1.72; color:var(--muted); direction:ltr; text-align:left; font-family:var(--font); letter-spacing:-.008em} /* THE CARD'S HEADINGS SIT ONE LEVEL DOWN — its `#` is an h2 (see mdRender): /benchmarks has its own h1 above the card, and a page has one. Each tag here wears what the tag above it used to, with what the global h3/h4 rules had been adding spelled out, and the two [lang="ar"] lines restate what the Arabic h2/h3 rules gave the old tags — so the card is drawn exactly as it was, in both languages, and only the outline moved. */ .doc h2{font-family:var(--font); font-weight:800; letter-spacing:-.03em; text-transform:none; font-size:clamp(27px,4vw,38px); margin:0 0 18px; color:var(--text)} .doc h3{font-family:var(--font); font-weight:750; letter-spacing:-.025em; text-transform:none; font-size:clamp(21px,3vw,27px); margin:44px 0 14px; padding-top:14px; border-top:1px solid var(--glass-line); color:var(--text)} .doc h4{font-family:var(--head); font-weight:650; letter-spacing:-.02em; font-size:17.5px; margin:30px 0 12px; color:var(--text)} .doc h5{font-size:15.4px; line-height:1.15; margin:22px 0 10px; color:var(--text)} [lang="ar"] .doc h3{font-weight:800} [lang="ar"] .doc h4{font-family:var(--font-ar); letter-spacing:0; text-transform:none} .doc p{margin:0 0 15px; max-width:82ch} .doc ul,.doc ol,.doc blockquote{max-width:82ch} .doc strong{color:var(--text); font-weight:640} .doc a{color:var(--accent)} .doc a:hover{text-decoration:underline} .doc a.dead{color:var(--muted); cursor:default} .doc a.dead:hover{text-decoration:none} .doc ul,.doc ol{margin:0 0 16px; padding-left:22px} .doc li{margin:6px 0} .doc h3,.doc h4,.doc h5{max-width:82ch} .doc code{overflow-wrap:anywhere; font-size:12.9px; padding:2px 6px; border-radius:5px; background:var(--surface-2); border:1px solid var(--border); color:var(--text)} .doc pre{margin:0 0 18px; padding:18px; overflow-x:auto; border-radius:var(--r); background:var(--bg-2); border:1px solid var(--glass-line)} .doc pre code{background:none; border:0; padding:0; font-size:12.7px; line-height:1.7; color:var(--text)} .doc blockquote{margin:0 0 18px; padding:14px 18px; border-left:3px solid var(--accent); border-radius:0 12px 12px 0; background:color-mix(in srgb,var(--accent) 7%,transparent)} .doc blockquote p:last-child{margin:0} .doc hr{border:0; border-top:1px solid var(--glass-line); margin:32px 0} .doc table{width:100%; border-collapse:collapse; font-size:13.4px; margin:0 0 18px} .doc table th{text-align:left; font-weight:600; color:var(--text); padding:11px 12px; border-bottom:1px solid var(--border-2)} .doc table td{padding:10px 12px; border-bottom:1px solid var(--glass-line); vertical-align:top} .doc .scroller{overflow-x:auto; margin:0 0 18px; border:1px solid var(--glass-line); border-radius:var(--r); padding:2px} .doc details{margin:0 0 18px; border:1px solid var(--glass-line); border-radius:var(--r); padding:14px 18px; background:var(--glass)} .doc summary{cursor:pointer; font-weight:600; color:var(--text)} .doc details[open] summary{margin-bottom:12px} .doc img{border-radius:10px} /* The card's own markup asks for 300px (``) and that image does not exist on this origin, so mdRender swaps the tag for this element — which then had a hard 104px in it and threw the card's instruction away. It is the first thing under the heading and it was a third the size it is on the model's own page. */ .doc .logo-mark{width:12rem; height:12rem; margin:10px auto 24px; background:var(--text); -webkit-mask:var(--mark-big) center/contain no-repeat; mask:var(--mark-big) center/contain no-repeat} /* the X, the logo's short form */ /* The card's badges, drawn here rather than fetched from shields.io (see mdRender): the same two-tone pill, in the site's own type, at the site's own radius — and on this origin's CSP, which is what the fetched ones could not be. */ .doc .mc-badge{display:inline-flex; align-items:stretch; margin:0 6px 8px 0; border-radius:7px; overflow:hidden; font-size:11.5px; line-height:1; letter-spacing:.01em; vertical-align:middle; border:1px solid var(--glass-line)} .doc .mc-badge b{padding:6px 8px; font-weight:600; color:var(--text); background:var(--glass)} .doc .mc-badge>span{padding:6px 9px; font-weight:600; color:#fff; background:color-mix(in srgb, var(--accent) 78%, #000)} .doc .scroller table[style]{font-size:12.8px} /* The card's benchmark tables bring their own frame, inline, so the Hub draws the same one; the scroller inside it only scrolls, or the page would draw a second frame inside the first. */ .doc div[style] > .scroller{border:0; border-radius:0; padding:0; margin:0} @media (max-width:820px){ .doc .scroller table td:first-child,.doc .scroller table th:first-child, .tbl-wrap table.t td:first-child,.tbl-wrap table.t th:first-child{position:sticky; inset-inline-start:0; z-index:2; background:var(--bg); box-shadow:1px 0 0 var(--glass-line)} .doc .scroller table th:first-child,.tbl-wrap table.t th:first-child{z-index:3; background:var(--surface-2)} /* The card keeps each benchmark's name on one line (inline, so the Hub gets it too). On a phone that sticky column would take half the screen from the scores, so here the names wrap again. */ .doc .scroller table td:first-child{white-space:normal !important} } .doc .pill-badge{display:inline-block; margin:0 6px 6px 0; font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:4px 10px; border-radius:var(--pill); color:var(--brand); border:1px solid color-mix(in srgb,var(--brand) 32%,transparent); background:color-mix(in srgb,var(--brand) 9%,transparent)} .doc h3 .anch,.doc h4 .anch{opacity:0; color:var(--faint); font-weight:400; margin-left:8px; transition:.15s} .doc h3:hover .anch,.doc h4:hover .anch{opacity:1} .doc-load{display:flex; align-items:center; gap:11px; color:var(--muted); font-size:14px; padding:40px 0} .spin{width:16px; height:16px; border-radius:50%; border:2px solid var(--border-2); border-top-color:var(--accent); animation:spin .8s linear infinite; flex:0 0 auto} @keyframes spin{to{transform:rotate(360deg)}} .ar-only{display:none} [lang="ar"] .ar-only{display:block} .note{margin-top:12px; color:var(--faint); font-size:13px} /* The Benchmarks page is one English document from top to bottom, so it does NOT mirror: in Arabic the contents list stays on the left, the four spec cards keep their order, and the intro stays left-aligned — the page reads the same way in both languages. The Arabic text sitting on it still resolves its own bidi: `plaintext` gives each block its own paragraph direction, which is what keeps a trailing "." at the END of an Arabic sentence instead of throwing it to the far side, while `text-align:left` (absolute, unlike `start`) holds the box itself to the left whatever that direction turns out to be. */ [dir="rtl"] #page-bench{direction:ltr} [dir="rtl"] #page-bench h1.sec, [dir="rtl"] #page-bench h2.sec, [dir="rtl"] #page-bench .sec-sub, [dir="rtl"] #page-bench .note, [dir="rtl"] #page-bench .card .num, [dir="rtl"] #page-bench .card>div, [dir="rtl"] #page-bench .doc-load span{unicode-bidi:plaintext; text-align:left} /* ── CTA band: glass, flat — the canvas is black and stays black ───────────────────────── */ .cta-band{position:relative; margin-top:clamp(40px,5vw,64px); padding:clamp(40px,5vw,64px) 0 0; border-top:1px solid var(--glass-line); isolation:isolate} .cta-band h2{font-family:var(--head); font-size:clamp(26px,3.2vw,42px); line-height:1.1; margin-top:16px; max-width:22ch} .cta-band p{margin:18px 0 0; color:var(--muted); max-width:52ch; font-size:clamp(15px,1.9vw,17px)} .cta-band .row{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; margin-top:30px; position:relative; z-index:1} .cta-band .mail{display:flex; flex-direction:column; gap:4px} .cta-band .mail .k{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)} .cta-band .mail a{font-family:var(--mono); font-size:14px; color:var(--text); direction:ltr} @media (max-width:560px){ .cta-band .row .btn{width:100%} } /* ── footer ─────────────────────────────────────────────────────────────────────────────── */ footer{border-top:1px solid var(--glass-line); margin-top:clamp(28px,4vw,56px); padding-top:clamp(38px,5vw,58px); padding-bottom:calc(clamp(26px,3vw,40px) + env(safe-area-inset-bottom)); background:linear-gradient(180deg,color-mix(in srgb,var(--text) 2%,transparent),transparent)} .foot-grid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:clamp(26px,2.6vw,56px)} @media (max-width:1100px){ .foot-grid{grid-template-columns:repeat(4,1fr)} .foot-id{grid-column:1/-1} } @media (max-width:720px){ .foot-grid{grid-template-columns:1fr 1fr; gap:30px 20px} } .foot-h{font-family:var(--font); font-weight:600; font-size:12px; letter-spacing:.06em; line-height:1.4; text-transform:uppercase; color:var(--faint); margin:0 0 10px} .foot-grid a,.foot-grid p{display:block; font-size:14px; line-height:1.5; color:var(--muted); margin:0; padding:5px 0; transition:color .15s var(--ease)} .foot-grid p{max-width:36ch; padding:0} @media (pointer:coarse){ .foot-grid a{padding:9px 0} } .foot-grid a:hover{color:var(--text)} .foot-grid a.ltr{direction:ltr; text-align:start; unicode-bidi:isolate} [dir="rtl"] .foot-grid a.ltr{text-align:right} /* `.foot-grid a` is display:block and outranks `.brand` — which turned the mark into an inline box with only its 1px ring left, a stray line in front of the name on every page. */ .foot-grid .brand{display:flex; align-items:center; gap:11px; padding:0; margin-bottom:16px} .foot-bot{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:center; text-align:center; margin-top:clamp(28px,3.4vw,44px); padding-top:22px; border-top:1px solid var(--glass-line); color:var(--faint); font-size:12.8px} /* `hidden` is a UA rule of one specificity point; ANY display here outranks it, which is how the counter came to sit in the footer with an empty number in front of its label. */ .foot-status{display:inline-flex !important; align-items:center; gap:7px} .foot-status .fs-dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--faint)} .foot-status[data-state="operational"] .fs-dot{background:var(--ok)} .foot-status[data-state="down"] .fs-dot{background:var(--danger)} .foot-status[data-state="unknown"] .fs-dot{background:var(--warn)} /* ── reveal-on-scroll (one-shot) ────────────────────────────────────────────────────────── */ .rv{opacity:0; transform:translateY(18px); transition:opacity .75s var(--ease), transform .75s var(--spring); transition-delay:var(--d,0s)} .rv.in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} } .grid>.rv:nth-child(2),.caps>.rv:nth-child(2),.starts>.rv:nth-child(2){--d:.06s} .grid>.rv:nth-child(3),.caps>.rv:nth-child(3),.starts>.rv:nth-child(3){--d:.12s} .grid>.rv:nth-child(4),.caps>.rv:nth-child(4){--d:.18s} .grid>.rv:nth-child(5),.caps>.rv:nth-child(5){--d:.24s} .grid>.rv:nth-child(6),.caps>.rv:nth-child(6){--d:.30s} /* ── page switching ─────────────────────────────────────────────────────────────────────── */ .page[hidden]{display:none} .page{animation:pagein .4s var(--ease) both} @keyframes pagein{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .page{animation:none} } .toast{position:fixed; inset-inline-start:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translate(-50%,20px); z-index:90; opacity:0; pointer-events:none; transition:.24s var(--ease); font-size:13.6px; font-weight:550; padding:11px 18px; border-radius:var(--pill); border:1px solid var(--glass-line); background:var(--elev); box-shadow:var(--shadow)} [dir="rtl"] .toast{transform:translate(50%,20px)} .toast.show{opacity:1; transform:translate(-50%,0)} [dir="rtl"] .toast.show{transform:translate(50%,0)} /* ── the opening screen (home only) ─────────────────────────────────────────────────────── */ html.no-splash .splash{display:none} .splash{position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:24px; background:var(--bg); opacity:1; overflow:hidden; animation:splashSafety 0s linear 6s forwards} .splash.gone{opacity:0; pointer-events:none; transition:opacity .5s var(--ease)} .splash.gone .sp-in{transform:scale(1.03); transition:transform .5s var(--ease)} @keyframes splashSafety{to{opacity:0; visibility:hidden; pointer-events:none}} .splash::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 40% at 50% 50%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%); opacity:0; animation:fadein 1.4s var(--ease) .3s forwards} @keyframes fadein{to{opacity:1}} .sp-in{position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(18px,3.4vw,26px); text-align:center} .sp-mark{position:relative; width:clamp(84px,20vw,112px); aspect-ratio:1; display:grid; place-items:center; opacity:0; animation:spMark .7s var(--ease) .05s forwards} @keyframes spMark{from{opacity:0; transform:scale(.88)} to{opacity:1; transform:scale(1)}} .sp-ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)} .sp-ring .trk{fill:none; stroke:color-mix(in srgb,var(--text) 9%,transparent); stroke-width:2} .sp-ring .arc{fill:none; stroke:url(#spGrad); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:289.03; stroke-dashoffset:289.03; animation:spArc 2s cubic-bezier(.38,.08,.2,1) .3s forwards} @keyframes spArc{to{stroke-dashoffset:0}} .sp-logo{width:66%; height:66%; background:currentColor; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat} /* The opening screen is the name in letters, each rising out of a blur — the one from before the wordmark (Ahmed, 2026-11-09: "اللودينج القديم … كان أفضل وأشيك"); the wordmark's wipe is gone. direction:ltr — THE NAME IS NOT A SENTENCE. These six letters are flex ITEMS, and a flex row in an RTL document lays its items out right to left: the opening screen of the Arabic site read "SORUCX". margin-inline-start still resolves against this element's own direction, now LTR. */ .sp-word{display:flex; direction:ltr; align-items:baseline; justify-content:center; font-family:var(--display); font-size:clamp(22px,6vw,36px); letter-spacing:.4em; text-transform:uppercase; line-height:1; color:var(--text); margin-inline-start:.4em} .sp-word span{display:inline-block; opacity:0; animation:spChar .6s cubic-bezier(.2,.7,.3,1) forwards} .sp-word span:nth-child(1){animation-delay:.18s} .sp-word span:nth-child(2){animation-delay:.26s} .sp-word span:nth-child(3){animation-delay:.34s} .sp-word span:nth-child(4){animation-delay:.42s} .sp-word span:nth-child(5){animation-delay:.50s} .sp-word span:nth-child(6){animation-delay:.58s} @keyframes spChar{from{opacity:0; transform:translateY(.34em); filter:blur(7px)} to{opacity:1; transform:none; filter:blur(0)}} .sp-sub{font-size:clamp(12px,2.6vw,14px); font-weight:500; color:var(--faint); letter-spacing:.02em; max-width:min(92vw,420px); opacity:0; animation:spRise .55s var(--ease) .8s forwards} [lang="ar"] .sp-sub{font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:13px} [lang="ar"] .sp-word{font-family:var(--display); text-transform:uppercase; letter-spacing:.4em} /* the name never changes face */ @keyframes spRise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .sp-mark,.sp-word span,.sp-sub,.splash::before{animation:none; opacity:1; transform:none; filter:none} .sp-ring .arc{animation:none; stroke-dashoffset:72} .splash.gone{transition:opacity .2s linear} .splash.gone .sp-in{transform:none; transition:none} } /* ── status page ────────────────────────────────────────────────────────────────────────── */ .st-hero{display:flex; align-items:center; gap:clamp(14px,2vw,20px); flex-wrap:wrap; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r); padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,28px); position:relative; overflow:hidden; box-shadow:inset 0 1px 0 var(--glass-hi)} .st-hero::before{content:""; position:absolute; inset:0; opacity:.12; pointer-events:none; background:radial-gradient(120% 150% at 0% 50%, var(--st-c) 0%, transparent 62%)} [dir="rtl"] .st-hero::before{background:radial-gradient(120% 150% at 100% 50%, var(--st-c) 0%, transparent 62%)} .st-hero[data-state="loading"]{--st-c:var(--faint)} .st-hero[data-state="operational"]{--st-c:var(--ok)} .st-hero[data-state="down"]{--st-c:var(--danger)} .st-hero[data-state="unknown"]{--st-c:var(--warn)} .st-hero[data-state="partial"]{--st-c:var(--warn)} .st-dot{width:13px; height:13px; border-radius:50%; background:var(--st-c); flex:none; position:relative} .st-dot::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--st-c); animation:stPulse 2.4s ease-in-out infinite} @keyframes stPulse{0%,100%{transform:scale(.7); opacity:.5} 50%{transform:scale(1.2); opacity:0}} .st-hero-txt{flex:1 1 260px; min-width:0} .st-hero-txt h3{margin:0; font-size:clamp(19px,2.3vw,25px); font-weight:700; letter-spacing:-.022em} .st-hero-txt p{margin:5px 0 0; color:var(--muted); font-size:14px; line-height:1.5} .st-hero-pct{text-align:end; flex:none} .st-hero-pct .k{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--faint)} [lang="ar"] .st-hero-pct .k{font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:12px} .st-hero-pct .v{font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-top:2px; font-family:var(--mono)} .st-comps{display:grid; gap:clamp(12px,1.6vw,18px)} .st-card{padding:0; overflow:hidden} .st-card-h{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px clamp(14px,2vw,20px); border-bottom:1px solid var(--glass-line)} .st-card-h h4{margin:0; font-size:15px; font-weight:640; letter-spacing:-.012em} .st-tag{font-size:12px; font-weight:640; padding:3px 10px; border-radius:var(--pill); white-space:nowrap; color:var(--ok-ink); background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)} .st-tag.down{color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); border-color:color-mix(in srgb,var(--danger) 30%,transparent)} .st-tag.muted{color:var(--faint); background:transparent; border-color:var(--glass-line)} .st-bars{display:flex; gap:clamp(3px,.6vw,5px); justify-content:space-between; align-items:stretch; height:clamp(88px,12vw,120px); padding:clamp(16px,2.2vw,22px) clamp(14px,2vw,20px) 12px; direction:ltr} .st-b{flex:1 1 0; min-width:3px; max-width:11px; border-radius:2px; background:var(--surface-2); transition:transform .14s var(--ease), filter .14s var(--ease)} .st-b:hover{transform:scaleY(1.07); filter:brightness(1.12)} .st-b.up{background:var(--ok)} .st-b.minor{background:color-mix(in srgb,var(--ok) 52%,var(--warn))} .st-b.degraded{background:var(--warn)} .st-b.major{background:var(--danger)} .st-b.nodata{background:var(--surface-2); border:1px solid var(--border)} .st-b.partial{background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--ok) 34%,transparent) 0 4px, var(--surface-2) 4px 8px)} /* direction:ltr, like .st-bars above it. Without it the axis mirrored while the chart did not, so "اليوم" sat under the OLDEST bar and "قبل 30 يومًا" under the newest. */ .st-axis{display:flex; direction:ltr; justify-content:space-between; align-items:center; gap:10px; padding:0 clamp(14px,2vw,20px) 12px; color:var(--faint); font-size:12px} .st-axis-mid{display:flex; align-items:center; gap:10px; flex:1 1 auto; justify-content:center; min-width:0} .st-axis-mid i{flex:1 1 auto; height:1px; background:var(--border-2); max-width:120px; min-width:14px} .st-axis-mid b{color:var(--text); font-weight:640; font-variant-numeric:tabular-nums} @media (max-width:560px){ .st-axis-mid i{display:none} } .st-legend{display:flex; flex-wrap:wrap; gap:6px 16px; padding:11px clamp(14px,2vw,20px); border-top:1px solid var(--glass-line); color:var(--muted); font-size:11.5px} .st-legend span{display:inline-flex; align-items:center; gap:6px} .st-legend .sw{width:10px; height:10px; border-radius:3px; flex:none; background:var(--surface)} .st-legend .sw.up{background:var(--ok)} .st-legend .sw.degraded{background:var(--warn)} .st-legend .sw.major{background:var(--danger)} .st-legend .sw.nodata{background:var(--surface); border:1px solid var(--border-2)} .st-legend .sw.partial{background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--ok) 40%,transparent) 0 3px, var(--surface) 3px 6px)} .st-legend-solo{border-top:1px solid var(--glass-line); margin-top:clamp(12px,1.6vw,18px); justify-content:center; gap:6px clamp(14px,2.4vw,26px); border-radius:var(--r)} .st-kpi{padding:clamp(15px,2vw,20px)} .st-kpi dt{font-size:11px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.08em} [lang="ar"] .st-kpi dt{font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:12px} .st-kpi .v{font-size:clamp(21px,2.6vw,27px); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-top:5px; font-family:var(--mono)} .st-kpi .sub{color:var(--faint); font-size:11.5px; margin-top:4px; line-height:1.4} .st-inc{display:flex; align-items:center; gap:12px; padding:13px clamp(14px,2vw,20px); border-bottom:1px solid var(--glass-line); flex-wrap:wrap} .st-inc:last-child{border-bottom:0} .st-inc .sev{width:8px; height:8px; border-radius:50%; background:var(--danger); flex:none} .st-inc .sev.ongoing{background:var(--warn); animation:stBlink 1.8s ease-in-out infinite} @keyframes stBlink{0%,100%{opacity:1} 50%{opacity:.3}} .st-inc .when{font-weight:600; font-size:14px} .st-inc .who{font-size:11.5px; font-weight:620; padding:2px 8px; border-radius:var(--pill); color:var(--muted); background:var(--surface-2); border:1px solid var(--border); white-space:nowrap} .st-inc .rec{color:var(--faint); font-size:13px} .st-inc .adj{font-size:10.5px; font-weight:680; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:var(--pill); white-space:nowrap; cursor:help; color:var(--warn-ink); background:color-mix(in srgb, var(--warn) 14%, transparent)} .st-inc .dur{margin-inline-start:auto; font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--danger); white-space:nowrap} .st-inc .dur.ongoing{color:var(--warn)} .st-empty{display:flex; align-items:center; justify-content:center; gap:9px; padding:clamp(26px,4vw,40px); color:var(--muted); font-size:14px} .st-empty.good{color:var(--ok-ink)} @media (max-width:620px){ .st-hero-pct{text-align:start} .st-inc .dur{margin-inline-start:0; width:100%} } @media (prefers-reduced-motion:reduce){ .st-dot::after,.st-inc .sev.ongoing{animation:none} .st-b{transition:none} } .st-b.is-modeled{position:relative} .st-b.is-modeled::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:color-mix(in srgb,var(--muted) 45%,transparent)} .st-legend .sw.modeled{background:var(--ok); position:relative} .st-legend .sw.modeled::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px; background:color-mix(in srgb,var(--muted) 55%,transparent)} /* ── shipped-model list (company page) ──────────────────────────────────────────────────── */ .mdl-tag{justify-self:start; font-size:11px; font-weight:640; padding:3px 9px; border-radius:var(--pill); white-space:nowrap; color:var(--muted); border:1px solid var(--border-2); background:color-mix(in srgb,var(--text) 4%,transparent)} .mdl-tag.open{color:var(--ok-ink); border-color:color-mix(in srgb,var(--ok) 32%,transparent); background:color-mix(in srgb,var(--ok) 10%,transparent)} /* the newest release, in the accent rather than the plain outline the older licensed rows carry */ .mdl-tag.new{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 42%,transparent); background:color-mix(in srgb,var(--accent) 11%,transparent)} .mdl-note{margin:10px 2px 0; color:var(--faint); font-size:12px} /* ── Arabic: the faces and the metrics, nothing else ────────────────────────────────────── */ [lang="ar"] body{font-family:var(--font-ar); letter-spacing:0; line-height:1.85} [lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] .sub-h,[lang="ar"] .cta-band h2,[lang="ar"] .btn,[lang="ar"] .links a,[lang="ar"] .menu-links a{font-family:var(--font-ar); letter-spacing:0; text-transform:none} [lang="ar"] .btn{font-size:14px; font-weight:700; padding-block:12px} [lang="ar"] .btn-sm{font-size:13px} [lang="ar"] .links a{font-size:13.5px; font-weight:700} [lang="ar"] .menu-links a{font-weight:800} [lang="ar"] h1,[lang="ar"] h2{font-weight:800} [lang="ar"] h1.display{font-size:clamp(21px,2.3vw,25px); line-height:1.5} [lang="ar"] h1.sec,[lang="ar"] h2.sec{font-size:clamp(24px,3.6vw,44px); line-height:1.25} [lang="ar"] .cta-band h2{font-size:clamp(24px,3.6vw,44px); line-height:1.25} [lang="ar"] .sub-h{font-size:clamp(18px,2.4vw,26px); font-weight:800} [lang="ar"] .sec-sub,[lang="ar"] .card p,[lang="ar"] .hero .lead{line-height:1.9} [lang="ar"] .eyebrow{font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:14px; font-weight:700} [lang="ar"] .layer-k,[lang="ar"] .start-mail .k{font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:12.5px; font-weight:700} [lang="ar"] .flow li,[lang="ar"] .fig-s{line-height:1.85} [lang="ar"] .doc-toc b,[lang="ar"] .foot-h,[lang="ar"] .specs dt,[lang="ar"] .rows b.k,[lang="ar"] .cta-band .mail .k,[lang="ar"] .st-hero-pct .k,[lang="ar"] .st-kpi dt,[lang="ar"] .cue{font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:12.5px; font-weight:700} [lang="ar"] .cmp-title h3{font-family:var(--font); font-weight:650} /* THESE THREE CARRY WORDS, not numbers: the tier badge ("الأحدث · وهو ما نشغّله"), the little label over a benchmark card ("الوضع", "الدقة", "العتاد") and the "مُعدَّل" tag on a corrected incident. In Arabic they were being set in JetBrains Mono with Latin tracking, which drops the text out of Almarai and pulls the joins apart. .card .num used to be in the mono list above. */ [lang="ar"] .tier .t-badge, [lang="ar"] .card .num, [lang="ar"] .st-inc .adj{font-family:var(--font-ar); letter-spacing:0; text-transform:none} /* ── /contact: the form in front of the horizon, the other ways on the planet under it. ─────── The first screen wears .co-hero, so it is the same dark island in the light theme and fetches the same planet. The form is a plain surface: nothing behind it may cost the words on it. */ .ct-hero{min-height:calc(100svh - var(--nav-top))} .ct-hero .co-rise{top:clamp(300px,46%,470px)} .ct-top{position:relative; z-index:3; text-align:center; padding-block:clamp(28px,5vh,56px) 0} .ct-h{font-size:clamp(32px,4.4vw,62px); line-height:1.06; letter-spacing:-.04em; text-wrap:balance} .ct-top .co-lead{margin-top:14px} .ct-form{width:min(620px,100%); margin:clamp(22px,3.6vh,36px) auto 0; padding:clamp(18px,2.2vw,28px); text-align:start; background:color-mix(in srgb,var(--text) 6%,var(--bg)); border:1px solid var(--glass-line); border-radius:var(--r); box-shadow:0 34px 70px -34px #000} .ct-form .field input,.ct-form .field textarea{background:var(--bg)} .ct-form .field textarea{min-height:112px} .ct-form .field .tel{background:var(--bg)} .ct-form .field .tel input{background:none} .ct-form .tel-cc span{margin-bottom:0} .ct-form .btn{width:100%; justify-content:center} .ct-form .cf-note{min-height:0; margin-top:10px} .ct-form .cf-note:empty{display:none} .ct-ways{position:relative; z-index:2; width:100%; margin-top:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2.6vw,40px); padding-block:clamp(30px,5.4vh,52px) clamp(26px,4.4vh,44px)} .ct-way{display:flex; flex-direction:column; gap:6px; min-width:0; color:var(--text); text-decoration:none} .ct-way b{font-family:var(--head); font-size:clamp(15.4px,1.25vw,17px); font-weight:650; letter-spacing:-.012em; line-height:1.3; transition:color .2s var(--ease)} .ct-way span{color:#c4cada; font-size:14px; line-height:1.5} .ct-way i{margin-top:auto; padding-top:4px; font-style:normal; font-weight:600; font-size:14.2px; color:var(--accent); direction:ltr; text-align:start; overflow-wrap:anywhere} [dir="rtl"] .ct-way i{text-align:end} /* The handle's @. Plus Jakarta Sans hangs it below the baseline, which is right beside lowercase and wrong beside six capitals: the same face, a size up and lifted onto the cap line. */ .ct-way .at{text-decoration:none; font-size:1.14em; line-height:0; vertical-align:.12em} @media (hover:hover){ .ct-way:hover b{color:var(--accent)} } .ct-way:focus-visible{outline:2px solid var(--accent); outline-offset:6px; border-radius:var(--r-sm)} /* THE WAYS ARE FOUND (Ahmed, 2026-11-08: the eye did not go to them). A fine line under each, and a short light that runs along the four in turn — WhatsApp, help, business, hello — then rests. One colour fading at both ends, moved by transform alone; held still where motion is reduced, and the whole line lit under the pointer. */ .ct-ln{position:relative; display:block; height:2px; margin-top:12px; border-radius:2px; overflow:hidden; text-decoration:none; background:color-mix(in srgb,var(--text) 13%,transparent); transition:background-color .25s var(--ease)} .ct-ln::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:40%; background:linear-gradient(90deg,transparent,var(--accent),transparent); transform:translateX(-100%); animation:ctRun 6s var(--ease) infinite} [dir="rtl"] .ct-ln::before{transform:translateX(100%); animation-name:ctRunR} .ct-way:nth-child(2) .ct-ln::before{animation-delay:.7s} .ct-way:nth-child(3) .ct-ln::before{animation-delay:1.4s} .ct-way:nth-child(4) .ct-ln::before{animation-delay:2.1s} @keyframes ctRun{0%{transform:translateX(-100%)} 22%,100%{transform:translateX(250%)}} @keyframes ctRunR{0%{transform:translateX(100%)} 22%,100%{transform:translateX(-250%)}} @media (hover:hover){ .ct-way:hover .ct-ln{background-color:var(--accent)} } .ct-way:focus-visible .ct-ln{background-color:var(--accent)} @media (prefers-reduced-motion:reduce){ .ct-ln::before,[dir="rtl"] .ct-ln::before{animation:none; transform:none} } /* The star a sent message leaves behind: a dot like the others in this sky. */ .ct-star{position:absolute; z-index:4; width:4px; height:4px; margin:-2px; border-radius:50%; background:#fff; pointer-events:none} .ct-door{margin-top:clamp(36px,4.4vw,60px)} @media (max-width:1040px){ .ct-ways{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:26px} } @media (max-width:640px){ .ct-hero{min-height:0} .ct-ways{grid-template-columns:minmax(0,1fr); gap:0; padding-block:clamp(26px,8vw,40px) 14px} .ct-way{padding-block:15px} } [lang="ar"] .ct-h{letter-spacing:0; line-height:1.2} [lang="ar"] .ct-way b{font-family:var(--font-ar); letter-spacing:0} /* ── /api: one surface for the two steps, then ruled sections, and the reference in folds. ──── */ .md-mid{padding-block-start:0} /* Past the first screen the page is for reading, so its headings step down, and the sections close up. */ .api-end{padding-block-end:clamp(56px,7vw,104px)} #page-api [id]{scroll-margin-top:calc(var(--nav-top) + 20px)} .api-lim{border-top:1px solid var(--glass-line)} .api-lim>div{display:grid; grid-template-columns:clamp(104px,12vw,168px) minmax(0,1fr); column-gap:clamp(14px,2.2vw,30px); align-items:baseline; min-width:0; padding:clamp(16px,1.7vw,22px) 0; border-bottom:1px solid var(--glass-line)} .api-lim>div:first-child .api-fig{color:var(--accent)} .api-fig{grid-row:1 / span 2; font-family:var(--head); font-size:clamp(26px,2.5vw,34px); font-weight:700; letter-spacing:-.035em; line-height:1.1; text-align:start} [dir="rtl"] .api-fig{text-align:right} .api-lim b{grid-column:2; font-family:var(--head); font-size:15.5px; font-weight:650; letter-spacing:-.012em; line-height:1.35} .api-lim p{grid-column:2; margin:6px 0 0; color:var(--muted); font-size:14.2px; line-height:1.6} .api-lim a{color:var(--accent); font-weight:600} .api-lim code{font-size:12.6px} .api-lim .api-v{display:block; margin-bottom:6px} /* The code is one object: the three values on top, then the request, and beside it what comes back. */ .api-facts{margin:auto 0 0; border-top:1px solid var(--glass-line)} .api-facts>div{min-width:0; padding:11px clamp(20px,2.1vw,28px)} .api-facts>div+div{border-top:1px solid var(--glass-line)} .api-facts dt{color:var(--muted); font-size:12.8px} .api-facts dd{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:4px 0 0; min-width:0} .api-facts code{min-width:0; padding:0; border:0; background:none; font-family:var(--mono); font-size:13.2px; color:var(--text); overflow-wrap:anywhere} .api-facts .cp{flex:none; display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:9px; cursor:pointer; color:var(--muted); background:none; transition:color .16s var(--ease), background .16s var(--ease)} .api-facts .cp:hover{color:var(--text); background:color-mix(in srgb,var(--text) 9%,transparent)} .api-facts .cp:focus-visible{outline:2px solid var(--accent); outline-offset:1px} .api-facts .cp.copied{color:var(--ok-ink)} .api-facts .cp svg{width:15px; height:15px} .api-run-c{position:relative; display:flex; flex:1; flex-direction:column; min-width:0} .api-run-c .tabs button{padding:6px 12px; font-size:13px} .api-run-c .codebox{position:static; flex:1; min-width:0; margin:0; border:0; border-radius:0; background:none; box-shadow:none} .api-reply{min-width:0; padding:12px clamp(16px,2vw,22px) 14px; border-top:1px solid var(--glass-line)} .api-reply-h{display:block; color:var(--muted); font-size:13px} .api-reply p{margin:4px 0 0; font-size:14px; line-height:1.65; color:var(--text); direction:ltr; text-align:left; unicode-bidi:isolate} .api-reply.play:not(.done) p::after{content:""; display:inline-block; width:2px; height:1em; margin-inline-start:3px; vertical-align:-.15em; background:var(--accent)} /* What this person has used. Bars follow the chart rules: at most 24px wide, 4px round at the data end, a 2px gap between the two parts of a day, one recessive grid, one axis per chart. */ .api-use-h{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px} .api-use-h .tabs{margin:0} .api-use-h .tabs[hidden]{display:none} .api-use,.bento{--u-in:#0b9bdc; --u-out:#8b5cf6} .api-use{display:grid; gap:clamp(12px,1.2vw,16px); margin-top:clamp(16px,2vw,22px)} [data-theme="light"] .api-use,[data-theme="light"] .uc-tip{--u-in:#0369a1; --u-out:#6d28d9} .use-kpi{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--glass-line); border-radius:18px; background:var(--glass-line)} .use-kpi>div{min-width:0; padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,22px); background:var(--bg-2)} .use-kpi span{display:block; color:var(--muted); font-size:13.4px} .use-kpi b{display:block; margin-top:6px; font-family:var(--head); font-size:clamp(24px,2.4vw,32px); font-weight:700; letter-spacing:-.03em; line-height:1.1; text-align:start} [dir="rtl"] .use-kpi b{text-align:right} .use-kpi small{display:block; margin-top:6px; color:var(--muted); font-size:12.8px} .use-note{margin:0; padding:12px 16px; border:1px solid var(--glass-line); border-radius:14px; color:var(--muted); font-size:14px} .uc,.use-lim{min-width:0; padding:clamp(16px,1.8vw,22px); border:1px solid var(--glass-line); border-radius:18px; background:var(--bg-2)} .uc-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 18px; margin-bottom:14px} .uc h3,.use-lim h3{margin:0; font-family:var(--head); font-size:15.5px; font-weight:650; letter-spacing:-.012em} [lang="ar"] .uc h3,[lang="ar"] .use-lim h3{font-family:var(--font-ar); letter-spacing:0} .uc-l{display:flex; gap:16px; margin:0; color:var(--muted); font-size:13px} .uc-l span{display:inline-flex; align-items:center; gap:7px} .uc-l i,.uc-tip i{width:10px; height:10px; border-radius:3px} .uc-l .n,.uc-tip .n,.uc-b .n{background:var(--u-in)} .uc-l .o,.uc-tip .o,.uc-b .o{background:var(--u-out)} .uc-c{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:clamp(170px,19vw,240px) auto; column-gap:10px} .uc-y{display:flex; flex-direction:column; justify-content:space-between; color:var(--muted); font-size:12px; line-height:1; text-align:right; font-variant-numeric:tabular-nums} .uc-p{position:relative; min-width:0} .uc-g{position:absolute; inset:6px 0 5px; display:flex; flex-direction:column; justify-content:space-between} .uc-g i{display:block; height:1px; background:var(--glass-line)} .uc-bs{position:absolute; inset:6px 0 5px; display:flex} .uc-b{flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:2px; height:100%; cursor:default} .uc-b:hover{background:color-mix(in srgb,var(--text) 6%,transparent)} .uc-b i{display:block; width:62%; max-width:24px; min-width:3px; flex:none} .uc-b i[style="height:0.00%"]{display:none} .uc-b i:first-child,.uc-b i[style="height:0.00%"]+i{border-radius:4px 4px 0 0} .uc-x{grid-column:2; display:flex; justify-content:space-between; margin-top:8px; color:var(--muted); font-size:12px} .uc-tip{position:absolute; top:0; z-index:2; display:grid; gap:3px; min-width:170px; padding:9px 11px; translate:-50% 0; pointer-events:none; border:1px solid var(--glass-line); border-radius:12px; background:var(--elev); box-shadow:0 12px 30px -12px rgba(0,0,0,.5); font-size:12.8px; color:var(--muted)} .uc-tip[hidden]{display:none} .uc-tip b{color:var(--text); font-weight:650} .uc-tip span{display:flex; align-items:center; gap:7px} .uc-tip u{margin-inline-start:auto; color:var(--text); text-decoration:none; font-variant-numeric:tabular-nums} /* The day split by model (useTipModels): a name, then its requests, input and output on one line. */ .uc-tip:has(.uc-ms,.uc-nw){min-width:210px; max-width:min(280px,80vw)} .uc-ms{display:grid; gap:7px; margin-top:5px; padding-top:7px; border-top:1px solid var(--glass-line)} .uc-mr{display:grid; gap:2px; min-width:0} .uc-mr strong{color:var(--text); font-weight:600; font-size:12.4px; overflow-wrap:anywhere; unicode-bidi:isolate; text-align:start} .uc-mr small{display:flex; align-items:center; gap:5px; color:var(--muted); font-size:11.8px; white-space:nowrap} .uc-mr small u{margin:0; color:var(--text)} .uc-mr small i{width:8px; height:8px; border-radius:2px; margin-inline-start:4px} .uc-nw{display:block; margin-top:5px; padding-top:7px; border-top:1px solid var(--glass-line); color:var(--muted); font-style:normal; font-size:11.8px; line-height:1.45; white-space:normal} .use-two{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(12px,1.2vw,16px)} .use-lim .ac-bar{margin-top:14px} .use-facts{margin:16px 0 0; padding-top:12px; border-top:1px solid var(--glass-line)} .use-facts>div{display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:13.4px} .use-facts dt{color:var(--muted)} .use-facts dd{margin:0; font-variant-numeric:tabular-nums} .use-table summary{display:inline-block; cursor:pointer; padding:4px 0; color:var(--accent); font-size:13.8px; font-weight:600; list-style:none} .use-table summary::-webkit-details-marker{display:none} .use-tw{overflow-x:auto; margin-top:8px; border:1px solid var(--glass-line); border-radius:14px} .use-table table{width:100%; border-collapse:collapse; font-size:13.6px} .use-table th,.use-table td{padding:9px 14px; text-align:start; border-top:1px solid var(--glass-line); white-space:nowrap} .use-table thead th{border-top:0; color:var(--muted); font-weight:600} .use-table tbody th{font-weight:500} .use-table td{font-variant-numeric:tabular-nums} .use-out{display:grid; justify-items:center; gap:8px; padding:clamp(34px,5vw,60px) 20px; text-align:center; border:1px dashed var(--glass-line); border-radius:18px} .use-out h3{margin:0; font-family:var(--head); font-size:clamp(19px,1.9vw,24px); font-weight:650; letter-spacing:-.02em} [lang="ar"] .use-out h3{font-family:var(--font-ar); letter-spacing:0} .use-out p{margin:0 0 10px; color:var(--muted); font-size:14.6px} .api-plain{border:0; border-radius:0; background:none; box-shadow:none} .api-plain .t th{background:none} @media (max-width:860px){ .use-kpi{grid-template-columns:repeat(2,minmax(0,1fr))} .use-two{grid-template-columns:minmax(0,1fr)} } @media (max-width:760px){ .api-how{grid-template-columns:minmax(0,1fr)} .api-gbody{grid-template-columns:minmax(0,1fr)} .api-grail{display:none} .api-step:not([data-on]){display:block} .api-step+.api-step{border-top:1px solid var(--glass-line)} .api-gnav{display:none} } /* On a phone the page already scrolls, so a step is only as tall as itself, and the bar names only the step in hand: three labels do not fit a phone's width, and the numbers say the rest. */ @media (max-width:760px){ } @media (max-width:520px){ .api-lim>div{grid-template-columns:minmax(0,1fr)} .api-fig{grid-row:auto; margin-bottom:8px} .api-lim b,.api-lim p{grid-column:1} .api-run-c .codebox-top{position:static; justify-content:flex-end; padding:8px 12px 0} } [lang="ar"] .api-lim b{font-family:var(--font-ar); letter-spacing:0} /* ── sign in ── */ .in-wrap{position:relative; min-height:calc(100svh - var(--nav-top,76px)); display:grid; place-items:center; padding:40px 20px 72px; overflow:hidden} .in-wrap>.sky{position:absolute; inset:0} .in-card{position:relative; width:100%; max-width:420px; isolation:isolate} /* The sky stops short of the form: a star behind a letter or inside the field reads as a mark on it. */ .in-card::before{content:""; position:absolute; inset:-48px -64px; z-index:-1; background:radial-gradient(closest-side,var(--bg) 72%,transparent)} .in-h{font-family:var(--head); font-size:clamp(30px,5vw,40px); line-height:1.08; letter-spacing:-.03em; margin:0 0 10px} .in-d{color:var(--muted); margin:0 0 22px; line-height:1.55} .in-sw{color:var(--muted); margin:20px 0 0; font-size:14px} .in-sw a{color:var(--accent)} .in-card .btn{width:100%} .in-card .field{margin:0 0 14px} .in-soc{display:grid; grid-template-columns:1fr 1fr; gap:10px} .in-soc.one{grid-template-columns:1fr} .in-soc-b{display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; font:inherit; font-weight:600; font-size:14px; color:var(--text); background:var(--bg); border:1px solid var(--glass-line); border-radius:var(--pill); cursor:pointer} .in-soc-b:hover{border-color:var(--muted)} .in-soc-b:focus-visible,.in-eye:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .in-soc-b svg{width:17px; height:17px; flex:0 0 auto} .in-or{grid-column:1/-1; display:flex; align-items:center; gap:12px; margin:10px 0 12px; color:var(--faint); font-size:12.6px} .in-or::before,.in-or::after{content:""; flex:1; height:1px; background:var(--glass-line)} .in-pw{position:relative} .in-pw input{padding-inline-end:46px} .in-eye{position:absolute; inset-block:0; inset-inline-end:4px; width:40px; display:grid; place-items:center; background:none; border:0; color:var(--muted); cursor:pointer} .in-eye:hover,.in-eye[aria-pressed="true"]{color:var(--text)} .in-eye svg{width:18px; height:18px} .in-meter{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:8px} .in-meter i{height:3px; border-radius:2px; background:var(--glass-line)} .in-meter[data-n="1"] i:nth-child(1),.in-meter[data-n="2"] i:nth-child(-n+2),.in-meter[data-n="3"] i{background:var(--accent)} .in-hint{display:block; margin-top:7px; color:var(--faint); font-size:12.6px; line-height:1.5} .in-msg{min-height:0; margin:0 0 12px; color:var(--danger-ink); font-size:13.5px; line-height:1.5} .in-msg:empty{display:none} .field input[aria-invalid="true"]{border-color:var(--danger-ink)} .in-forgot{margin:-4px 0 14px; font-size:13.5px; text-align:end} .in-forgot a{color:var(--accent)} .in-skip{margin:16px 0 0; text-align:center} .field .opt{margin-inline-start:6px} .ac-me{grid-column:1/-1} .ac-row{display:grid; grid-template-columns:130px 1fr auto; gap:12px; align-items:baseline; padding:11px 0; border-top:1px solid var(--glass-line); font-size:14px} .ac-row>span{color:var(--muted)} .ac-row b{font-weight:500; min-width:0; overflow-wrap:anywhere} .ac-none{font-style:normal; color:var(--faint)} .ac-form{margin-top:14px; max-width:420px} .ac-form .in-hint{margin:-6px 0 12px} /* ── your account ── */ .ac-wrap{padding-top:44px; padding-bottom:88px; min-height:62vh} .ac-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:28px} .ac-h{font-family:var(--head); font-size:clamp(30px,5vw,44px); line-height:1.08; letter-spacing:-.03em; margin:0} .ac-mail{color:var(--muted); margin:8px 0 0; text-align:start; unicode-bidi:plaintext} .ac-wait{color:var(--muted)} .ac-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px} .ac-card{border:1px solid var(--glass-line); border-radius:var(--r); padding:24px; min-width:0} .ac-card h2{font-family:var(--font); font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0; margin:0 0 14px} .ac-name{display:flex; align-items:baseline; gap:10px; margin:0 0 6px} .ac-name b{font-family:var(--head); font-size:36px; letter-spacing:-.03em; line-height:1.1} .ac-name span{color:var(--muted); font-size:15px} .ac-sub{color:var(--muted); font-size:14px; margin:0} .ac-acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px} .ac-stop,.ac-q{margin-top:14px; font-size:13.5px} .ac-q{color:var(--muted); margin-bottom:0} .ac-note{margin:12px 0 0; font-size:14px; color:var(--text); line-height:1.5} .ac-note.bad{color:#fca5a5} [data-theme="light"] .ac-note.bad{color:#b91c1c} .ac-note a, #ppWait a{color:var(--accent)} .ac-bar+.ac-bar{margin-top:20px} .ac-bar p{display:flex; justify-content:space-between; gap:12px; margin:0 0 8px; font-size:14px; color:var(--muted)} .ac-bar b{color:var(--text); font-weight:600} .ac-bar b i{color:var(--faint); font-style:normal; font-weight:500} .ac-track{display:block; height:6px; border-radius:6px; background:color-mix(in srgb,var(--text) 9%,transparent); overflow:hidden} .ac-track i{display:block; height:100%; min-width:2px; border-radius:6px; background:var(--accent)} .ac-key{grid-column:1/-1} .ac-new{margin:0 0 12px; color:var(--text); font-size:14.5px} .ac-secret{display:flex; align-items:center; gap:12px; flex-wrap:wrap} .ac-secret code{flex:1 1 240px; min-width:0; font-family:var(--mono); font-size:14px; overflow-wrap:anywhere; text-align:start} .ac-key .ac-sub{margin-top:12px} .ac-links{display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; font-size:14px} /* ── paying ── */ .pay-wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,6vw,88px); padding-top:44px; padding-bottom:96px; min-height:62vh; align-items:start} .pay-back{display:inline-flex; gap:8px; color:var(--muted); font-size:14px; text-decoration:none; margin-bottom:26px} .pay-back:hover{color:var(--text)} [dir="rtl"] .pay-back [aria-hidden]{transform:scaleX(-1)} .pay-h{font-family:var(--head); font-size:clamp(40px,6vw,60px); line-height:1.04; letter-spacing:-.035em; margin:0} .pay-price{color:var(--muted); margin:10px 0 26px; font-size:16px} .pay-price b{font-family:var(--head); color:var(--text); font-size:26px; letter-spacing:-.02em} .pay-usd{display:block; margin-top:6px; font-size:13px} .pay-nums{margin:0; border-top:1px solid var(--glass-line)} .pay-nums div{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--glass-line)} .pay-nums dt{color:var(--muted)} .pay-nums dd{margin:0; font-weight:600} .pay-pts{list-style:none; padding:0; margin:20px 0 0; color:var(--muted); font-size:14.5px; line-height:1.5} .pay-pts li{padding:5px 0} .pay-main{border:1px solid var(--glass-line); border-radius:var(--r); padding:clamp(22px,3vw,32px); min-width:0} .pay-q{font-family:var(--head); font-size:22px; letter-spacing:-.02em; margin:0 0 16px} .pay-same{color:var(--muted); font-size:14px; margin:-6px 0 14px} .pay-ways{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border:1px solid var(--glass-line); border-radius:var(--pill); margin-bottom:20px} .pay-ways button{all:unset; box-sizing:border-box; text-align:center; padding:9px 12px; border-radius:var(--pill); cursor:pointer; color:var(--muted); font-size:14.5px; font-weight:600} .pay-ways button[aria-selected="true"]{background:var(--cta); color:var(--cta-ink)} .pay-ways button:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .pay-box{border-top:1px solid var(--glass-line); margin-bottom:16px} .pay-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--glass-line)} .pay-row>span{color:var(--muted); font-size:14px} .pay-row b{font-size:16px; text-align:end; overflow-wrap:anywhere; min-width:0} .pay-copy{all:unset; display:inline-grid; cursor:pointer; color:var(--accent); font-size:13px; font-weight:600; gap:5px} .pay-copy svg{width:13px; height:13px} .pay-copy:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px} .pay-steps{margin:0 0 14px; padding-inline-start:20px; color:var(--muted); font-size:14.5px; line-height:1.55} .pay-steps li{padding:2px 0} .pay-main .field{margin:0 0 12px} .pay-main form .btn{width:100%} .pay-d{color:var(--muted); font-size:13.5px; line-height:1.55; margin:14px 0 0} .pay-msg{color:#fca5a5; font-size:14px; margin:12px 0 0} [data-theme="light"] .pay-msg{color:#b91c1c} .pay-as{color:var(--faint); font-size:13px; margin:14px 0 0} .pay-pp{min-height:56px} .pay-state h2{font-family:var(--head); font-size:24px; letter-spacing:-.02em; margin:0 0 10px} .pay-state p{color:var(--muted); margin:0 0 20px; line-height:1.55} /* ── the bar's way in: on a phone it is in the menu, where the room is ── */ .nav-in>.nav-acct{color:var(--muted); font-size:13.5px; font-weight:500; text-decoration:none; white-space:nowrap; padding:0 6px} .nav-in>.nav-acct:hover{color:var(--text)} .nav-in>.nav-me{width:38px; height:38px; padding:0; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; border:1px solid var(--glass-line); color:var(--muted); transition:.18s var(--ease)} .nav-in>.nav-me svg{width:18px; height:18px} .nav-in>.nav-me:hover{color:var(--text); border-color:var(--border-2); background:var(--glass)} .nav-in>.nav-me.in{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 10%,transparent)} .nav-in>.nav-me.in:hover{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent)} @media (max-width:1240px){ .nav .cta-nav .arr,.cta-long{display:none} .cta-short{display:inline} .links a{padding:0 10px} } @media (max-width:979px){ .nav-in>.nav-acct{display:none} } @media (max-width:820px){ .ac-grid,.pay-wrap{grid-template-columns:1fr} .ac-key,.ac-me{grid-column:auto} .ac-row{grid-template-columns:1fr auto} .ac-row>b{grid-column:1; grid-row:2} .ac-row>button{grid-column:2; grid-row:1} .ac-wrap,.pay-wrap{padding-top:28px} } /* ── /pricing: four cards side by side, and Custom under them ─────────────────────────────── No pictures: what a plan buys is the picture. Every row stands at the same height on all four, so the eye reads across: the prices, then what each plan gives in a week and in a month. The wash at the top of a card deepens plan by plan and Max alone wears the accent, so the page says where it ends without a word. One hue faded into the card, the way the site's glass is, never two colours. Nothing here moves at rest. */ .pl-head{padding-block:clamp(44px,6vw,84px) clamp(24px,3vw,40px)} .pl-head h1{font-size:clamp(34px,5vw,66px); letter-spacing:-.035em; line-height:1.04; text-wrap:balance} .pl-sub{margin:16px 0 0; max-width:60ch; color:var(--muted); font-size:clamp(16px,1.5vw,18px); line-height:1.6} .pl-cards{--ck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.5vw,22px)} .pl{--sp:clamp(20px,1.8vw,26px); --wash:var(--text); --wa:6%; position:relative; display:flex; flex-direction:column; min-width:0; padding:var(--sp); overflow:hidden; border:1px solid var(--glass-line); border-radius:var(--r); transition:border-color .2s var(--ease); background:linear-gradient(to bottom,color-mix(in srgb,var(--wash) var(--wa),var(--bg)),color-mix(in srgb,var(--text) 2%,var(--bg)) 340px)} .pl::before{content:""; position:absolute; top:0; inset-inline:14%; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--wash) 60%,transparent),transparent)} .pl:nth-child(2){--wa:10%} .pl:nth-child(3){--wa:15%} .pl.top{--wash:var(--accent); --wa:24%; border-color:color-mix(in srgb,var(--accent) 60%,transparent)} @media (hover:hover){ .pl:hover{border-color:color-mix(in srgb,var(--text) 32%,transparent)} .pl.top:hover{border-color:var(--accent)} } .pl-name{display:flex; align-items:center; gap:10px; min-height:34px} .pl h2{margin:0; font-family:var(--head); font-size:clamp(25px,2.3vw,32px); font-weight:700; letter-spacing:-.025em; line-height:1.1} .pl-tag{padding:4px 11px; border-radius:var(--pill); background:var(--accent); color:var(--bg); font-size:12px; font-weight:700; white-space:nowrap} .pl-who{margin:10px 0 0; min-height:4.5em; color:var(--muted); font-size:14px; line-height:1.5} .pl-price{margin:20px 0 0; font-family:var(--head); font-size:clamp(42px,4vw,58px); font-weight:700; letter-spacing:-.04em; line-height:1} .pl-price small{font-family:var(--font); font-size:14px; font-weight:500; letter-spacing:0; color:var(--muted); white-space:nowrap} .pl-price.pl-long{font-size:clamp(34px,3.1vw,46px)} .pl.top .pl-price{color:var(--accent)} /* A price in another money (app.js paintPricingPrices): the currency's letters small beside the number, and what PayPal takes in dollars under it. */ .pl-price .cc, .pay-price .cc{font-family:var(--font); font-size:.4em; font-weight:600; letter-spacing:0; margin:0 .3em} .pl-usd{margin:8px 0 0; font-size:13px; color:var(--muted); line-height:1.4} .pl .btn{margin-top:20px; justify-content:center; width:100%; box-sizing:border-box; padding-inline:10px} .pl.top .btn-primary{background:var(--accent); border-color:var(--accent); color:var(--bg)} .pl.top .btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--text)); border-color:transparent} /* THE PLAN THIS ACCOUNT IS ON (paintPricingPlan, Ahmed 2026-11-08): a two-pixel ring of the accent, and where its button was, a lit "Current plan" that goes nowhere. Flat colour, no glow. */ .pl.now{--wash:var(--accent); --wa:22%; border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)} .pl.now.top{--wa:26%} @media (hover:hover){ .pl.now:hover{border-color:var(--accent)} } .pl.now a.btn,.pl:not(.now) .pl-cur{display:none} .pl-cur{display:flex; align-items:center; justify-content:center; gap:8px; margin:20px 0 0; min-height:48px; box-sizing:border-box; padding:0 12px; border-radius:var(--pill); border:1px solid var(--accent); background:color-mix(in srgb,var(--accent) 32%,transparent); color:var(--text); font-size:14px; font-weight:700; cursor:default} .pl-cur svg{color:var(--accent)} .pl-cur svg{width:15px; height:15px; flex:0 0 auto} .pl-ms{margin-top:22px; border-top:1px solid var(--glass-line)} .pl-m{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; padding-block:14px; border-bottom:1px solid var(--glass-line)} .pl-mh{grid-column:1/-1; display:flex; align-items:center; gap:5px; min-height:23px; margin:0; color:var(--muted); font-size:13px; white-space:nowrap} .pl-mh>span:first-child{color:var(--text); font-weight:650} .pl-mh em{margin-inline-start:auto; padding:2px 8px; border-radius:var(--pill); background:color-mix(in srgb,var(--text) 10%,transparent); color:var(--text); font-style:normal; font-size:12px; font-weight:700} .pl.top .pl-mh em{background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent)} .pl-n{display:flex; flex-direction:column; gap:2px; min-width:0} .pl-n b{font-family:var(--head); font-size:clamp(19px,1.7vw,24px); font-weight:700; letter-spacing:-.02em; line-height:1.15; white-space:nowrap; font-variant-numeric:tabular-nums} .pl-n span{color:var(--muted); font-size:12.8px} .pl.top .pl-n:last-child b{color:var(--accent)} .pl-plus{margin:20px 0 0; font-size:13.8px; font-weight:650} .pl-pts{list-style:none; margin:12px 0 0; padding:0; display:grid; align-content:start; gap:10px; color:var(--muted); font-size:14px; line-height:1.42} .pl-pts li{position:relative; padding-inline-start:23px} .pl-pts li.key{color:var(--text); font-weight:600} .pl-pts bdi{white-space:nowrap} .pl-pts li::before{content:""; position:absolute; inset-inline-start:0; top:.2em; width:14px; height:14px; background:color-mix(in srgb,var(--text) 72%,transparent); -webkit-mask:var(--ck) center/contain no-repeat; mask:var(--ck) center/contain no-repeat} .pl.top .pl-pts li::before{background:var(--accent)} .pl-custom{grid-column:1/-1; flex-direction:row; gap:clamp(20px,4vw,56px)} .pl-c-a{flex:0 0 32%; display:flex; flex-direction:column; min-width:0} .pl-c-a .pl-who{min-height:0} .pl-c-a .pl-price{font-size:clamp(30px,3vw,42px); letter-spacing:-.03em} .pl-c-b{flex:1; min-width:0} .pl-c-b .pl-plus{margin:0} .pl-c-b .pl-pts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px clamp(16px,3vw,40px); margin:14px 0 0} .pl-note{margin:16px 0 0; color:var(--faint); font-size:13.5px} .pl-faq{margin-top:clamp(22px,3vw,38px); border-top:1px solid var(--glass-line)} .pl-lim{padding-block:2px 18px} .pl-lim p{max-width:70ch; margin:0 0 12px} .pl-lim b{display:block; color:var(--text); font-weight:650} .pl-pick{display:none} .pl-cmp-w{padding-bottom:18px} .pl-cmp{--ck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:14px} .pl-cmp th,.pl-cmp td{padding:11px 8px; border-bottom:1px solid var(--glass-line); text-align:center; font-weight:500; font-variant-numeric:tabular-nums; color:var(--text); vertical-align:middle} .pl-cmp tbody th{padding-inline-start:0; text-align:start; color:var(--muted); line-height:1.4} .pl-cmp thead th{font-family:var(--head); font-size:15.5px; font-weight:700} .pl-cmp thead th:first-child{width:34%} .pl-cmp thead th:nth-child(5){color:var(--accent)} .pl-cmp tr.g th{padding-block:22px 9px; font-family:var(--head); font-size:15.5px; font-weight:650; color:var(--text)} .pl-cmp i,.pl-cmp .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)} .pl-cmp td.y::before{content:""; display:inline-block; width:16px; height:16px; vertical-align:middle; background:var(--accent); -webkit-mask:var(--ck) center/contain no-repeat; mask:var(--ck) center/contain no-repeat} .pl-cmp td.n::before{content:""; display:inline-block; width:12px; height:1.5px; vertical-align:middle; background:var(--faint); opacity:.45} @media (prefers-reduced-motion:reduce){ .pl{transition:none} } @media (max-width:1180px){ .pl-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .pl-who{min-height:3em} } @media (max-width:760px){ .pl-head{padding-block:clamp(30px,8vw,48px) 22px} .pl-cards{grid-template-columns:minmax(0,1fr)} .pl-who{min-height:0} .pl-custom{flex-direction:column} .pl-c-a{flex:none} .pl-c-b .pl-pts{grid-template-columns:minmax(0,1fr)} .pl-pick{position:sticky; top:var(--nav-top); z-index:3; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding-block:6px 8px; background:var(--bg)} .pl-pick button{all:unset; box-sizing:border-box; cursor:pointer; text-align:center; padding-block:9px; border-radius:var(--pill); font-size:13.5px; font-weight:600; color:var(--muted); border:1px solid var(--glass-line)} .pl-pick button.on{color:var(--bg); background:var(--text); border-color:var(--text)} .pl-pick button:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .pl-cmp,.pl-cmp tbody{display:block} .pl-cmp thead,.pl-cmp td{display:none} .pl-cmp tr{display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--glass-line)} .pl-cmp th,.pl-cmp td{padding-inline:0; border-bottom:0} .pl-cmp tbody th{flex:1; min-width:0} .pl-cmp[data-col="1"] td:nth-child(2),.pl-cmp[data-col="2"] td:nth-child(3),.pl-cmp[data-col="3"] td:nth-child(4),.pl-cmp[data-col="4"] td:nth-child(5),.pl-cmp[data-col="5"] td:nth-child(6){display:block; flex:none; max-width:46%; text-align:end} } /* ── THE LIGHT MODE (html.lite, decided in app.js) ────────────────────────────────────────── The same page for a device that cannot keep up: what decorates rests, what tells the story stays. The stars hold at the brightness they pass through, the meteor and the map's beams are gone, the building's ambient windows and rack lights hold still while its floors go on sending files down and answers up. The planet's own saving (20 a second, 1x) is in initPlanet. */ .lite .sky>svg{animation:none; opacity:.8} .lite .meteor{display:none} .lite .wm-beam{display:none} .lite .vault .tw-wn.amb,.lite .vault .tw-led{animation:none} /* ── /model ───────────────────────────────────────────────────────────────────────────────── Read from the top by someone who knows nothing about models: the name and how to try it, what it does with the proof beside it, how to use it, and the reference folded at the bottom. One picture moves (the disc, one sentence at a time, resting on each). The bars only grow in once, as they arrive. Nothing here is a card: the rows are ruled, not boxed. */ .md-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(24px,5vw,90px); align-items:center; min-height:min(calc(100svh - var(--nav-top)),800px); padding-block:clamp(24px,4vw,48px)} .md-say{margin:0; font-family:var(--head); font-size:clamp(21px,2.2vw,25px); font-weight:560; line-height:1.22; letter-spacing:-.022em; text-wrap:balance} .md-lead{margin:18px 0 0; color:var(--muted); font-size:clamp(15px,1.5vw,16.6px); max-width:48ch; line-height:1.68} .md-copy .hero-cta{margin-top:30px} .md-mind{margin:0; min-width:0; display:grid; justify-items:center; gap:clamp(14px,1.8vw,22px); text-align:center} .md-disc{display:block; width:min(100%,clamp(270px,34vw,460px)); aspect-ratio:1; overflow:visible} .md-disc circle{fill:color-mix(in srgb,var(--accent) 26%,transparent); transition:fill 1s var(--ease), fill-opacity 1s var(--ease)} .md-disc circle.on{fill:var(--accent); fill-opacity:1; transition-duration:.08s} .md-disc circle.core{fill:var(--accent-2); fill-opacity:1} .md-disc line{stroke:var(--accent); stroke-width:.18; stroke-linecap:round} .md-mind figcaption{width:100%; display:grid; justify-items:center; gap:8px} .md-line{margin:0; min-height:2.5em; max-width:32ch; font-family:var(--head); font-size:clamp(16px,1.6vw,19px); font-weight:560; line-height:1.25; letter-spacing:-.012em} .md-line span{opacity:.12; transition:opacity .22s var(--ease)} .md-line span.on{opacity:1} .md-line.out span{opacity:0; transition-duration:.38s} .md-cap{margin:0; color:var(--muted); font-size:13.5px} .md-cap b{color:var(--accent); font-weight:700} .md-sec{padding-block:clamp(44px,6.4vw,92px)} .md-rows{margin-top:clamp(26px,3.4vw,44px); border-top:1px solid var(--glass-line)} .md-row{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(20px,4vw,72px); align-items:start; padding-block:clamp(26px,3.2vw,44px); border-bottom:1px solid var(--glass-line)} .md-what h3{font-size:clamp(26px,3vw,40px); font-weight:650; letter-spacing:-.03em; line-height:1.08; text-wrap:balance} .md-what p{margin:12px 0 0; color:var(--muted); font-size:clamp(15px,1.4vw,16px); line-height:1.6; max-width:30ch} .md-tests{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,44px)} .md-tn{margin:0 0 14px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:15px; font-weight:600} .md-tn small{color:var(--faint); font-size:12px; font-weight:500; white-space:nowrap; direction:ltr} .md-b{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:5px 10px; color:var(--muted); font-size:13px} .md-b+.md-b{margin-top:11px} .md-b em{font-style:normal; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .md-b b{font-weight:600; font-variant-numeric:tabular-nums} .md-b.us{color:var(--text)} .md-b.us b{color:var(--accent); font-weight:700; font-size:15px} .md-b>span{grid-column:1/-1; height:6px; border-radius:var(--pill); overflow:hidden; background:color-mix(in srgb,var(--text) 8%,transparent)} .md-b>span i{display:block; height:100%; border-radius:inherit; background:var(--faint); transform:scaleX(0); transform-origin:left center; transition:transform 1.2s var(--ease) .15s} [dir="rtl"] .md-b>span i{transform-origin:right center} .md-b.us>span i{background:var(--accent)} .md-row.in .md-b>span i{transform:none} .md-more{margin:22px 0 0; font-size:14.5px} .md-doors{margin-top:clamp(22px,3vw,38px); border-top:1px solid var(--glass-line)} .md-door{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,.86fr) minmax(0,.42fr); gap:clamp(12px,3vw,48px); align-items:center; padding-block:clamp(20px,2.3vw,30px); border-bottom:1px solid var(--glass-line); color:var(--text); text-decoration:none} .md-door b{font-family:var(--head); font-size:clamp(19px,2vw,24px); font-weight:650; letter-spacing:-.02em; line-height:1.2; transition:color .2s var(--ease)} .md-door>span{color:var(--muted); font-size:clamp(14.6px,1.3vw,15.6px); line-height:1.55} .md-door i{font-style:normal; display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; font-size:14.5px; font-weight:600; white-space:nowrap; transition:color .2s var(--ease)} .md-door svg{width:16px; height:16px; flex:none; transition:transform .22s var(--spring)} [dir="rtl"] .md-door svg{transform:scaleX(-1)} @media (hover:hover){ .md-door:hover b,.md-door:hover i{color:var(--accent)} .md-door:hover svg{transform:translateX(4px)} [dir="rtl"] .md-door:hover svg{transform:scaleX(-1) translateX(4px)} } .md-door:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--r-sm)} .md-last{padding-block-start:clamp(18px,2.6vw,36px)} .md-last .sub-h{margin-top:0} .md-fold summary{font-family:var(--head); font-size:clamp(16px,1.6vw,18px); font-weight:650; letter-spacing:-.012em; padding-block:18px} .md-fold-b{padding-block:4px 30px; display:grid; gap:18px; min-width:0} .md-fold-b>*{min-width:0} .md-fold-b p{margin:0} .md-fold-b .model-names{margin:0} .md-fold-b .tiers{margin-bottom:4px} .md-notes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,34px); padding-top:6px} .md-notes h3{margin-bottom:8px} .md-link{font-size:14.5px} [lang="ar"] :is(.md-say,.md-line,.md-what h3,.md-door b,.md-fold summary){letter-spacing:0} .md-line{unicode-bidi:plaintext} @media (max-width:1100px){ .md-row{grid-template-columns:1fr; gap:20px} .md-what p{max-width:46ch} } @media (max-width:900px){ .md-hero{grid-template-columns:1fr; min-height:0; justify-items:center; padding-block:clamp(16px,4vw,32px) clamp(28px,6vw,44px); gap:clamp(26px,6vw,40px)} .md-copy{text-align:center} .md-copy .md-lead{margin-inline:auto} .md-disc{width:min(78vw,380px)} .md-door{grid-template-columns:minmax(0,1fr) auto; gap:6px 14px} .md-door b{grid-column:1; grid-row:1} .md-door>span{grid-column:1; grid-row:2} .md-door i{grid-column:2; grid-row:1 / span 2} .md-door i span{display:none} .md-door svg{width:20px; height:20px} .md-notes{grid-template-columns:1fr} } @media (max-width:620px){ .md-tests{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .md-b>span i{transform:none; transition:none} .md-disc circle,.md-line span{transition:none} } /* ── /company ─────────────────────────────────────────────────────────────────────────────── A horizon, then a pinned story, then the rest of the page. The first screen is the home page's planet seen from close by, on black in both themes. The story keeps its picture still while the page scrolls: every release draws its orbit, so the system is finished when the story is. What moves: the map, slowly; the moons, each a full turn; the stars. All of it rests off screen. */ .co-hero{position:relative; overflow:hidden; display:flex; flex-direction:column; background:var(--bg); min-height:max(620px,min(calc(100svh - var(--nav-top)),860px))} .co-hero:not(.play) .sky>svg{animation-play-state:paused} .co-rise{--d:max(200vw,900px); position:absolute; left:50%; top:clamp(330px,60%,600px); width:var(--d); height:var(--d); translate:-50% 0; border-radius:50%; overflow:hidden; isolation:isolate; background:#0b2a63; box-shadow:0 0 0 1px rgba(170,225,255,.34), 0 -8px 46px -8px rgba(90,160,255,.34)} .co-rise>i{position:absolute; inset:0; display:block} .co-rise .gm{transform:rotate(20deg)} .co-rise .gm::before{content:""; position:absolute; inset:-8% auto -8% -100%; width:200%; background-size:25% 50%; background-repeat:repeat} .co-hero.seen .co-rise .gm::before{background-image:url(/vendor/planet-2.webp)} /* The small planet is a quarter of the memory, and a phone or a plain screen cannot show the difference. */ @media (max-width:900px),(max-width:1400px) and (max-resolution:1.4dppx){ .co-hero.seen .co-rise .gm::before{background-image:url(/vendor/planet-2-sm.webp)} } .lite .co-hero.seen .co-rise .gm::before{background-image:url(/vendor/planet-2-sm.webp)} .co-rise .gs{background:linear-gradient(to bottom,rgba(0,4,16,0) 0,rgba(0,4,16,.12) 60px,rgba(0,4,16,.62) 170px,rgba(0,0,0,.93) 290px,#000 380px), radial-gradient(30% 7% at 50% 0,rgba(200,232,255,.13),rgba(200,232,255,0) 100%),linear-gradient(rgba(10,50,150,.26),rgba(10,50,150,.26))} .co-top{position:relative; z-index:2; text-align:center; padding-block:clamp(34px,6.4vh,72px) 0} .co-h{font-size:clamp(33px,5.1vw,76px); line-height:1.05; letter-spacing:-.04em; text-wrap:balance} .co-lead{margin:20px auto 0; text-shadow:0 0 8px #000,0 0 2px #000; color:var(--muted); font-size:clamp(15px,1.5vw,17px); line-height:1.65; max-width:58ch; text-wrap:balance} .co-top .hero-cta{justify-content:center; margin-top:28px} .co-stats{position:relative; z-index:2; margin-top:auto; padding-block:clamp(26px,5vh,48px) clamp(20px,3.6vh,36px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,3vw,48px); text-align:center} .co-stats>*{min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text); text-decoration:none} .co-stats b{display:flex; direction:ltr; font-family:var(--head); font-weight:700; font-size:clamp(26px,4vw,56px); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums} .co-stats b i{font-style:normal; font-size:.5em; line-height:1.1; color:var(--accent); margin-inline-start:.06em} .co-stats span[data-i18n]{color:#c4cada; font-size:clamp(12.5px,1.15vw,14.5px)} @media (hover:hover){ .co-stats a:hover span[data-i18n]{color:var(--accent)} } .co-story{--h:clamp(600px,calc(100svh - var(--nav-top)),900px); background:var(--bg)} .co-pin{position:relative; height:var(--h); padding-inline:var(--pad); overflow:hidden} .co-pin .sky>svg{animation:none; will-change:auto; opacity:.7} .co-sys{position:absolute; inset:0; pointer-events:none} .co-side{position:relative; z-index:1} .co-cv{position:absolute; pointer-events:none} .co-side{min-width:0; height:100%; width:min(42%,520px); display:grid; grid-template-rows:auto minmax(0,1fr) auto; align-content:center; padding-block:clamp(26px,9vh,92px) clamp(22px,7vh,70px)} .co-side h2{margin-top:0; font-size:clamp(22px,2.3vw,30px)} .co-path{position:relative; list-style:none; margin:0; padding:0} .co-stop{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; opacity:0; visibility:hidden; transform:translateY(18px); transition:opacity .42s var(--ease), transform .55s var(--ease), visibility 0s .42s} .co-stop.here{opacity:1; visibility:visible; transform:none; transition-delay:.06s,.06s,0s} .co-st{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; min-height:24px} .co-st i{font-style:normal; color:var(--faint); font-size:13px} .co-stop h3{margin-top:14px; font-family:var(--display); font-size:clamp(25px,3.2vw,46px); font-weight:400; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; -webkit-text-stroke:.8px currentColor; direction:ltr; text-wrap:balance} [dir="rtl"] .co-stop h3{text-align:right} .co-stop p{margin:16px 0 0; color:var(--muted); font-size:clamp(16px,1.6vw,19px); line-height:1.55; max-width:36ch} .co-dl{display:inline-block; margin-top:14px; color:var(--text); font-size:15px; text-decoration:none} .co-dl b{font-family:var(--head); font-weight:700; font-size:1.3em; letter-spacing:-.02em; font-variant-numeric:tabular-nums} @media (hover:hover){ .co-dl:hover{color:var(--accent)} } .co-rail{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; direction:ltr} .co-rail button{all:unset; position:relative; box-sizing:border-box; cursor:pointer; display:block; padding-top:10px; border-top:2px solid var(--glass-line); color:var(--faint); font-family:var(--display); font-size:clamp(8px,.72vw,10px); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; transition:color .3s var(--ease), border-color .3s var(--ease)} .co-rail button::before{content:""; position:absolute; inset:-2px 0 auto; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left} .co-rail button.on::before{transform:none} /* The fill of the current segment is the story's clock: app.js moves on when it ends. */ .co-rail button.here::before{animation:coFill 4.6s linear} .co-rail button:first-child.here::before{animation-duration:5.4s} .co-rail button:last-child.here::before{animation-duration:8s} @keyframes coFill{from{transform:scaleX(0)}} .co-pin:not(.play) .co-rail button::before{animation-play-state:paused} .co-side:has(a:focus-visible) .co-rail button::before{animation-play-state:paused} @media (hover:hover){ .co-side:has(a:hover) .co-rail button::before{animation-play-state:paused} } .co-rail button.here{color:var(--text)} .co-rail button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px} .co-story.flat .co-pin{height:auto; overflow:visible} .co-story.flat :is(.co-sys,.sky,.co-cv){display:none} .co-story.flat .co-path{display:grid; gap:34px; margin-block:20px} .co-story.flat .co-stop{position:static; opacity:1; visibility:visible; transform:none} .co-story.flat .co-rail{display:none} .co-vals{margin-top:clamp(24px,3.2vw,42px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:var(--r-lg)} .co-val{min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(22px,2.8vw,34px) clamp(20px,2.6vw,32px)} .co-val+.co-val{border-inline-start:1px solid var(--glass-line)} @media (max-width:760px){ .co-vals{grid-template-columns:minmax(0,1fr)} .co-val+.co-val{border-inline-start:0; border-top:1px solid var(--glass-line)} } .co-val b{margin-top:clamp(14px,1.6vw,18px); font-size:16px; font-weight:650; letter-spacing:-.01em; line-height:1.4; color:var(--text)} .co-val span{margin-top:6px; font-size:14px; line-height:1.6; color:var(--muted); max-width:36ch; text-wrap:balance} .co-pic{display:block; width:clamp(92px,9vw,124px); height:auto; margin-bottom:clamp(16px,2vw,24px); overflow:visible} .co-pic rect.w{fill:none; stroke:var(--accent); stroke-width:1.6} .co-pic .d{fill:color-mix(in srgb,var(--accent) 26%,transparent)} .co-pic .o{fill:var(--accent)} .co-pic .c{fill:var(--accent-2)} #page-company .cta-band{margin-top:0} [lang="ar"] :is(.co-h,.co-st i,.co-val b){letter-spacing:0} [lang="ar"] .co-val span{line-height:1.85} @media (max-width:900px){ .co-story{--h:clamp(600px,calc(100svh - var(--nav-top)),760px)} .co-pin{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto; gap:6px; padding-block:12px 14px} .co-side{display:contents} .co-side h2{grid-row:1; font-size:clamp(19px,5vw,26px); text-align:center} .co-sys{position:relative; inset:auto; grid-row:2; min-height:0} .co-path{grid-row:3; height:clamp(176px,27svh,226px)} .co-rail{grid-row:4} .co-stop{align-items:center; text-align:center; justify-content:flex-start} .co-st{justify-content:center} [dir="rtl"] .co-stop h3{text-align:center} .co-stop h3{margin-top:10px; font-size:clamp(21px,6vw,30px)} .co-stop p{margin-top:10px; font-size:15.5px} .co-dl{margin-top:8px} } @media (prefers-reduced-motion:reduce){ .co-stop{transition:none} }