/* nabd styles */

/* Tokens: scale, motion, layout */
:root{
  --hand-filter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='hand'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.09' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='3' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#hand");
  /* spacing scale (4px base) */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* radius scale — large but never pill-shaped except where meaningful */
  --r1:2px; --r2:3px; --r3:4px; --r4:4px; --r5:4px; --r6:6px; --rf:999px;

  /* type scale */
  --t-display:clamp(2.05rem, 1.35rem + 2.7vw, 2.9rem);
  --t-h1:1.375rem;
  --t-h2:1.0625rem;
  --t-h3:.9375rem;
  --t-body:.9375rem;
  --t-ui:.875rem;
  --t-sm:.8125rem;
  --t-xs:.75rem;

  /* families */
  --f-serif:"Tajawal",ui-sans-serif,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --f-sans:"Tajawal",ui-sans-serif,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --f-display:"Aref Ruqaa","Tajawal",serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* motion */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --d1:110ms; --d2:180ms; --d3:260ms; --d4:420ms;

  /* layout */
  --sidebar-w:274px;
  --measure:46rem;
  --topbar-h:58px;
  --gutter:clamp(16px, 4vw, 40px);
  --sa-top:0px;
  --sa-bottom:0px;
}

/* Tokens: colour */
/* Atmospheres */
[data-theme="dunes"]{
  color-scheme:dark;
  --canvas:#1C1218;
  --sidebar:#150D12;
  --surface:#271A20;
  --surface-2:#31212A;
  --surface-3:#3B2933;
  --surface-hover:rgba(246,233,225,0.05);
  --surface-press:rgba(246,233,225,0.09);

  --text:#F6E9E1;
  --text-2:#CDB8AE;
  --text-3:#A48F87;
  --text-4:#7E6B65;

  --border:rgba(246,233,225,0.09);
  --border-2:rgba(246,233,225,0.15);
  --border-3:rgba(246,233,225,0.26);

  --accent:#F2B88A;
  --accent-2:#F7CFAE;
  --accent-dim:#B98559;
  --accent-wash:rgba(242,184,138,0.1);
  --accent-wash-2:rgba(242,184,138,0.17);
  --accent-ring:rgba(242,184,138,0.4);
  --on-accent:#2A1408;

  --danger:#FF7A6B;
  --danger-wash:rgba(255,122,107,0.13);

  --code-bg:#150D12;
  --code-head:#1E1318;

  --shadow-1:none;
  --shadow-2:none;
  --shadow-3:0 0 0 1px rgba(246,233,225,0.16);

  --sky:linear-gradient(180deg,#140C14 0%,#2A1622 38%,#6A3A3C 66%,#B8694A 80%,#5A2E30 100%);
  --scene-x:93%;
  --scene:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMax slice'><filter id='hd' x='-2%' y='-2%' width='104%' height='104%'><feTurbulence type='fractalNoise' baseFrequency='.018 .026' numOctaves='2' seed='4' result='a'/><feDisplacementMap in='SourceGraphic' in2='a' scale='9' xChannelSelector='R' yChannelSelector='G' result='b'/><feTurbulence type='fractalNoise' baseFrequency='.11' numOctaves='1' seed='9' result='c'/><feDisplacementMap in='b' in2='c' scale='3' xChannelSelector='G' yChannelSelector='R'/></filter><g filter='url(%23hd)'><defs><linearGradient id='g0' gradientUnits='userSpaceOnUse' x1='0' y1='520' x2='0' y2='650'><stop offset='0' stop-color='%23E08A5A' stop-opacity='0'/><stop offset='0.8' stop-color='%23E08A5A' stop-opacity='0.28'/><stop offset='1' stop-color='%23E08A5A' stop-opacity='0.1'/></linearGradient><linearGradient id='g1' gradientUnits='userSpaceOnUse' x1='0' y1='580' x2='0' y2='630'><stop offset='0' stop-color='%23E09466' stop-opacity='0'/><stop offset='1' stop-color='%23E09466' stop-opacity='0.32'/></linearGradient><linearGradient id='g2' gradientUnits='userSpaceOnUse' x1='0' y1='640' x2='0' y2='842'><stop offset='0' stop-color='%23824A44' stop-opacity='1'/><stop offset='1' stop-color='%234B2A33' stop-opacity='1'/></linearGradient><linearGradient id='g3' gradientUnits='userSpaceOnUse' x1='0' y1='697' x2='0' y2='905'><stop offset='0' stop-color='%235D3238' stop-opacity='1'/><stop offset='1' stop-color='%23341C25' stop-opacity='1'/></linearGradient><linearGradient id='g4' gradientUnits='userSpaceOnUse' x1='0' y1='759' x2='0' y2='965'><stop offset='0' stop-color='%233E222B' stop-opacity='1'/><stop offset='1' stop-color='%231E1017' stop-opacity='1'/></linearGradient><linearGradient id='g5' gradientUnits='userSpaceOnUse' x1='0' y1='832' x2='0' y2='1030'><stop offset='0' stop-color='%2324121A' stop-opacity='1'/><stop offset='1' stop-color='%23120A0F' stop-opacity='1'/></linearGradient></defs><circle cx='948' cy='124' r='0.9' fill='%23FFF3E0' fill-opacity='0.255416'/><circle cx='1385' cy='0' r='1.1' fill='%23FFF3E0' fill-opacity='0.385489'/><circle cx='1238' cy='3' r='1.1' fill='%23FFF3E0' fill-opacity='0.574554'/><circle cx='1433' cy='0' r='0.9' fill='%23FFF3E0' fill-opacity='0.267766'/><circle cx='925' cy='274' r='0.9' fill='%23FFF3E0' fill-opacity='0.262863'/><circle cx='487' cy='1' r='0.6' fill='%23FFF3E0' fill-opacity='0.402508'/><circle cx='1209' cy='2' r='1.1' fill='%23FFF3E0' fill-opacity='0.353466'/><circle cx='208' cy='257' r='0.6' fill='%23FFF3E0' fill-opacity='0.469694'/><circle cx='863' cy='243' r='0.9' fill='%23FFF3E0' fill-opacity='0.564552'/><circle cx='812' cy='30' r='0.6' fill='%23FFF3E0' fill-opacity='0.279793'/><circle cx='10' cy='238' r='0.6' fill='%23FFF3E0' fill-opacity='0.558325'/><circle cx='1007' cy='8' r='0.6' fill='%23FFF3E0' fill-opacity='0.36989'/><circle cx='229' cy='280' r='0.6' fill='%23FFF3E0' fill-opacity='0.248493'/><circle cx='1185' cy='16' r='0.6' fill='%23FFF3E0' fill-opacity='0.332087'/><circle cx='171' cy='7' r='0.6' fill='%23FFF3E0' fill-opacity='0.400321'/><circle cx='1173' cy='85' r='0.6' fill='%23FFF3E0' fill-opacity='0.368043'/><circle cx='815' cy='15' r='0.6' fill='%23FFF3E0' fill-opacity='0.480339'/><circle cx='297' cy='12' r='1.1' fill='%23FFF3E0' fill-opacity='0.487854'/><circle cx='84' cy='1' r='1.1' fill='%23FFF3E0' fill-opacity='0.47329'/><circle cx='305' cy='176' r='1.1' fill='%23FFF3E0' fill-opacity='0.597954'/><circle cx='70' cy='6' r='1.1' fill='%23FFF3E0' fill-opacity='0.360947'/><circle cx='484' cy='11' r='1.1' fill='%23FFF3E0' fill-opacity='0.217212'/><circle cx='749' cy='221' r='1.1' fill='%23FFF3E0' fill-opacity='0.436104'/><circle cx='1408' cy='3' r='0.9' fill='%23FFF3E0' fill-opacity='0.243986'/><circle cx='1196' cy='49' r='0.6' fill='%23FFF3E0' fill-opacity='0.360868'/><circle cx='1176' cy='176' r='0.9' fill='%23FFF3E0' fill-opacity='0.519748'/><circle cx='673' cy='0' r='0.6' fill='%23FFF3E0' fill-opacity='0.285371'/><circle cx='909' cy='28' r='0.6' fill='%23FFF3E0' fill-opacity='0.322861'/><circle cx='583' cy='5' r='0.6' fill='%23FFF3E0' fill-opacity='0.210156'/><circle cx='1147' cy='204' r='0.9' fill='%23FFF3E0' fill-opacity='0.338431'/><circle cx='508' cy='107' r='0.6' fill='%23FFF3E0' fill-opacity='0.370003'/><circle cx='472' cy='4' r='0.9' fill='%23FFF3E0' fill-opacity='0.403951'/><circle cx='1147' cy='49' r='1.1' fill='%23FFF3E0' fill-opacity='0.316119'/><circle cx='1418' cy='220' r='0.9' fill='%23FFF3E0' fill-opacity='0.21175'/><circle cx='353' cy='27' r='0.6' fill='%23FFF3E0' fill-opacity='0.594466'/><circle cx='1242' cy='9' r='0.6' fill='%23FFF3E0' fill-opacity='0.224364'/><circle cx='427' cy='194' r='0.9' fill='%23FFF3E0' fill-opacity='0.444619'/><circle cx='726' cy='31' r='0.9' fill='%23FFF3E0' fill-opacity='0.424773'/><circle cx='281' cy='279' r='1.1' fill='%23FFF3E0' fill-opacity='0.422384'/><circle cx='1425' cy='6' r='0.9' fill='%23FFF3E0' fill-opacity='0.38056'/><polygon points='0,520 1440,520 1440,650 0,650' fill='url(%23g0)'/><polyline points='410,237 416,233 420,240 424,233 430,237' fill='none' stroke='%231B0F16' stroke-width='1.76' stroke-opacity='0.6' stroke-linecap='round' stroke-linejoin='round'/><polyline points='462,259 466,257 470,262 474,257 478,259' fill='none' stroke='%231B0F16' stroke-width='1.44' stroke-opacity='0.6' stroke-linecap='round' stroke-linejoin='round'/><polyline points='383,266 387,263 390,268 393,263 397,266' fill='none' stroke='%231B0F16' stroke-width='1.28' stroke-opacity='0.6' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1231,327 1236,324 1240,330 1244,324 1249,327' fill='none' stroke='%231B0F16' stroke-width='1.6' stroke-opacity='0.6' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1283,350 1287,347 1290,352 1293,347 1297,350' fill='none' stroke='%231B0F16' stroke-width='1.28' stroke-opacity='0.6' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1194,358 1197,356 1200,360 1203,356 1206,358' fill='none' stroke='%231B0F16' stroke-width='1.12' stroke-opacity='0.6' stroke-linecap='round' stroke-linejoin='round'/><g><path d='M250 455 L215.4 489.2 L182.6 522.9 L146.8 557.3 L111.4 591 L78 625 L112.8 625.7 L145.5 624 L179.9 625.4 L216.2 622.7 L250 624 L251.5 591.7 L250.5 556.8 L248.9 521 L250.1 487.4 Z' fill='%233A2029'/><path d='M250 455 L283.4 488.2 L317.3 522.9 L353 558.1 L387.7 591.4 L422 625 L387.6 625.3 L353.1 623.9 L320.4 626 L285.5 624.9 L250 624 L249.4 589.3 L249.3 555 L250.9 522.3 L251.1 488.4 Z' fill='%2396564A'/><path d='M234.9 475.1 L248 475.3' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M255.9 477.1 L266.8 475.8' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M210.4 497.8 L243.2 496.6' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M253.1 498.2 L281.9 498' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M191.3 517.6 L232.4 517.1' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M265.9 518.5 L294.8 518.2' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M173.3 538.8 L238.9 539.9' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M256.7 538.9 L316 538.8' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M174.9 560.2 L238.4 561.8' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M260.9 561.3 L331.6 561.1' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M132.1 581.2 L243.2 581' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M281 581.3 L345.5 580.5' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M112 602.4 L223.9 603.2' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M271.3 603.8 L366.9 602.8' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M179.1 564 l8.3 5.8' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M159.9 597.8 l8.7 5.9' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M164.5 580.7 l8.4 9.8' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M173.7 595.2 l10 5.5' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M250 455 L248.5 484.6 L249.2 512 L249.2 540.5 L250.3 567 L249 596.5 L250 624' stroke='%23E9B79A' stroke-opacity='.4' stroke-width='1.2' fill='none' stroke-linecap='round'/><path d='M76.1 622.8 L108.6 597.4 L137.2 566.7 L166.8 538.2 L191.2 510.3 L221.4 481.2 L249.4 454.7 L278.7 481.5 L306.1 513.1 L337.1 540.2 L364.2 568 L390.1 593.8 L419.9 625.8' stroke='%23140A10' stroke-opacity='0.85' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M78.5 625.2 L107.1 596.2 L136.6 568.3 L164.5 540.8 L192.2 511.5 L222.3 484.2 L250.5 455.4 L279.1 484.2 L306.3 511.8 L336 540.5 L363.1 568.4 L392.6 596 L422.3 623.7' stroke='%23140A10' stroke-opacity='0.5' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M66 626 L112.2 626.3 L156.8 626.4 L205.4 627.1 L250.6 625.7 L296.7 626.2 L341.8 626.9 L386.8 626.7 L434 626' stroke='%23140A10' stroke-opacity='.55' stroke-width='1.4' fill='none' stroke-linecap='round'/></g><g><path d='M470 530 L448.9 549.3 L430.7 567.1 L411.8 587 L392 607.3 L372 625 L390.8 623.2 L410.6 625.2 L429.8 623.3 L451.7 624.7 L470 624 L469.8 606.5 L469.4 586.9 L469 567.4 L471 550.1 Z' fill='%233A2029'/><path d='M470 530 L490.8 548.6 L509.5 567.4 L527.6 587 L549.5 607.1 L568 625 L549.1 626.2 L528.1 623.5 L509 623.7 L488.7 623.9 L470 624 L470.4 605.2 L469.4 587.5 L471.5 567.4 L468.6 547.3 Z' fill='%2396564A'/><path d='M452.4 553.9 L461.9 553.7' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M473.1 552.5 L491.3 552.4' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M429.9 577.7 L453.6 576.2' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M474.1 577.3 L501.9 576.8' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M412.9 601.1 L458.9 601.9' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M485.9 600.5 L521.1 599.5' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M455.6 558.8 l12 5.9' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M450.5 573.6 l11.9 7.6' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M431.3 592.9 l9.8 9' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M442.9 609.3 l13.5 8.6' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M470 530 L468.8 545.5 L470.4 562.6 L469.6 577.2 L471.2 593.6 L471.4 608.2 L470 624' stroke='%23E9B79A' stroke-opacity='.4' stroke-width='1.2' fill='none' stroke-linecap='round'/><path d='M372.7 622.7 L391 609.7 L406.6 593.6 L420.7 578.8 L440.1 563.4 L454.2 546.9 L469.6 530.8 L487.6 545 L500.2 561.1 L518.2 578.2 L533.9 590.6 L551.4 606.4 L569.3 622.6' stroke='%23140A10' stroke-opacity='0.85' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M371.6 624.7 L389.1 607.4 L406 593.2 L422.9 577.5 L439.2 561.3 L455.2 544.6 L469.4 530.1 L485.5 546.3 L502.4 561.4 L518.9 577.2 L533.5 592.4 L550.9 609.4 L567.2 624.9' stroke='%23140A10' stroke-opacity='0.5' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M360 626 L388.8 626.1 L415.2 625.2 L442.6 626 L470.3 624.7 L498.8 626 L524.7 626.8 L552.7 626 L580 626' stroke='%23140A10' stroke-opacity='.55' stroke-width='1.4' fill='none' stroke-linecap='round'/></g><g><path d='M95 555 L82 567.6 L67.9 582.7 L55.7 598.4 L39.9 610.9 L27 625 L39.4 624.6 L55.2 625.9 L67.7 623.8 L80.4 624.6 L95 624 L96.4 609 L95.9 594.9 L94 581.7 L95.6 568.2 Z' fill='%233A2029'/><path d='M95 555 L108.1 569.4 L120.9 583.7 L134.6 597 L148.6 610 L163 625 L149.5 624.6 L135.4 624.3 L122.3 623.3 L107.7 624.6 L95 624 L95.4 610.3 L96.1 596.8 L96.1 581.7 L95.8 569.8 Z' fill='%2396564A'/><path d='M79.1 577.6 L89.4 579.3' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M97.3 578.8 L115.9 576.9' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M55.8 600.5 L89.2 599.8' stroke='%23140A10' stroke-opacity='0.32' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M106.4 601.6 L129.2 599.9' stroke='%23D89A80' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M74.5 592.4 l7.1 6' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M63.9 604 l13.8 5.6' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M71 596.6 l10.5 8.4' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M86 583.5 l7.7 5.2' stroke='%23140A10' stroke-opacity='.3' stroke-width='1' fill='none' stroke-linecap='round'/><path d='M95 555 L95.2 566.5 L95.2 576.9 L94 588.6 L96.1 602.6 L96.4 611.2 L95 624' stroke='%23E9B79A' stroke-opacity='.4' stroke-width='1.2' fill='none' stroke-linecap='round'/><path d='M25.1 626 L39.8 613.7 L50.2 600.9 L62.1 589.2 L73.4 575.9 L84.9 568 L94.4 554.9 L107.1 566.1 L115.7 576.5 L128.1 587.4 L140.7 602.3 L150.9 614.1 L163.6 623.6' stroke='%23140A10' stroke-opacity='0.85' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M27.3 624 L41.3 613.3 L50.4 602.1 L62.6 590.2 L73.8 577.8 L85 567.5 L95.4 555.5 L106.7 566.3 L117.6 576.9 L127.6 589.4 L137.7 600.6 L150.4 612.8 L162.3 625.2' stroke='%23140A10' stroke-opacity='0.5' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M15 626 L35.5 625.5 L55.4 626.2 L75.1 625.7 L96.4 626.4 L115.6 626.7 L136.3 624.7 L155.3 626.7 L175 626' stroke='%23140A10' stroke-opacity='.55' stroke-width='1.4' fill='none' stroke-linecap='round'/></g><polyline points='250,455 420,624' fill='none' stroke='%23FFC48F' stroke-width='1.2' stroke-opacity='0.4' stroke-linecap='round' stroke-linejoin='round'/><polyline points='470,530 566,624' fill='none' stroke='%23FFC48F' stroke-width='1.2' stroke-opacity='0.4' stroke-linecap='round' stroke-linejoin='round'/><polyline points='95,555 161,624' fill='none' stroke='%23FFC48F' stroke-width='1.2' stroke-opacity='0.4' stroke-linecap='round' stroke-linejoin='round'/><polygon points='0,580 1440,580 1440,630 0,630' fill='url(%23g1)'/><polygon points='-8,649 0,649 8,649 16,649 24,648 32,648 40,647 48,646 56,645 64,644 72,644 80,643 88,642 96,641 104,640 112,639 120,639 128,638 136,638 144,638 152,638 160,639 168,639 176,640 184,641 192,642 200,644 208,645 216,647 224,649 232,651 240,653 248,656 256,658 264,660 272,663 280,665 288,667 296,669 304,671 312,673 320,675 328,676 336,678 344,679 352,680 360,680 368,681 376,681 384,681 392,681 400,681 408,681 416,680 424,680 432,679 440,678 448,678 456,677 464,676 472,676 480,676 488,675 496,675 504,675 512,675 520,675 528,675 536,676 544,676 552,677 560,678 568,679 576,680 584,680 592,681 600,682 608,683 616,684 624,685 632,686 640,686 648,686 656,686 664,686 672,686 680,686 688,685 696,684 704,683 712,681 720,680 728,678 736,676 744,674 752,672 760,670 768,668 776,665 784,663 792,661 800,658 808,656 816,654 824,652 832,651 840,649 848,648 856,646 864,645 872,645 880,644 888,644 896,644 904,644 912,644 920,644 928,644 936,645 944,645 952,646 960,647 968,647 976,648 984,648 992,649 1000,649 1008,649 1016,649 1024,649 1032,649 1040,649 1048,648 1056,648 1064,647 1072,646 1080,645 1088,645 1096,644 1104,643 1112,642 1120,641 1128,640 1136,639 1144,638 1152,638 1160,637 1168,637 1176,637 1184,637 1192,638 1200,638 1208,639 1216,640 1224,641 1232,643 1240,644 1248,646 1256,648 1264,650 1272,653 1280,655 1288,657 1296,660 1304,662 1312,664 1320,666 1328,668 1336,670 1344,672 1352,674 1360,675 1368,676 1376,677 1384,678 1392,679 1400,679 1408,680 1416,680 1424,680 1432,679 1440,679 1448,679 1448,900 -8,900' fill='url(%23g2)'/><polyline points='-8,649 0,649 8,649 16,649 24,648 32,648 40,647 48,646 56,645 64,644 72,644 80,643 88,642 96,641 104,640 112,639 120,639 128,638 136,638 144,638 152,638 160,639 168,639 176,640 184,641 192,642 200,644 208,645 216,647 224,649 232,651 240,653 248,656 256,658 264,660 272,663 280,665 288,667 296,669 304,671 312,673 320,675 328,676 336,678 344,679 352,680 360,680 368,681 376,681 384,681 392,681 400,681 408,681 416,680 424,680 432,679 440,678 448,678 456,677 464,676 472,676 480,676 488,675 496,675 504,675 512,675 520,675 528,675 536,676 544,676 552,677 560,678 568,679 576,680 584,680 592,681 600,682 608,683 616,684 624,685 632,686 640,686 648,686 656,686 664,686 672,686 680,686 688,685 696,684 704,683 712,681 720,680 728,678 736,676 744,674 752,672 760,670 768,668 776,665 784,663 792,661 800,658 808,656 816,654 824,652 832,651 840,649 848,648 856,646 864,645 872,645 880,644 888,644 896,644 904,644 912,644 920,644 928,644 936,645 944,645 952,646 960,647 968,647 976,648 984,648 992,649 1000,649 1008,649 1016,649 1024,649 1032,649 1040,649 1048,648 1056,648 1064,647 1072,646 1080,645 1088,645 1096,644 1104,643 1112,642 1120,641 1128,640 1136,639 1144,638 1152,638 1160,637 1168,637 1176,637 1184,637 1192,638 1200,638 1208,639 1216,640 1224,641 1232,643 1240,644 1248,646 1256,648 1264,650 1272,653 1280,655 1288,657 1296,660 1304,662 1312,664 1320,666 1328,668 1336,670 1344,672 1352,674 1360,675 1368,676 1376,677 1384,678 1392,679 1400,679 1408,680 1416,680 1424,680 1432,679 1440,679 1448,679' fill='none' stroke='%23F5B183' stroke-width='1.6' stroke-opacity='0.34' stroke-linecap='round' stroke-linejoin='round'/><polygon points='1000,652 1027,652 1029,644 1025,638 1004,638 998,644' fill='%231B0F14'/><polygon points='1008,639 1015,626 1022,639' fill='%231B0F14'/><polygon points='1024,640 1029,628 1035,619 1039,620 1034,632 1030,644' fill='%231B0F14'/><polygon points='1035,619 1044,621 1045,624 1038,624 1036,622' fill='%231B0F14'/><polygon points='1002,652 1005,652 1005,667 1002,667' fill='%231B0F14'/><polygon points='1008,652 1012,652 1009,667 1006,667' fill='%231B0F14'/><polygon points='1020,652 1023,652 1023,667 1020,667' fill='%231B0F14'/><polygon points='1026,652 1029,652 1027,667 1024,667' fill='%231B0F14'/><polygon points='998,644 994,650 996,661 998,652' fill='%231B0F14'/><polygon points='1058,649 1085,649 1087,641 1083,634 1062,634 1056,641' fill='%231B0F14'/><polygon points='1066,635 1073,623 1080,635' fill='%231B0F14'/><polygon points='1082,636 1087,625 1093,615 1097,616 1092,629 1088,641' fill='%231B0F14'/><polygon points='1093,615 1102,617 1103,621 1096,621 1094,618' fill='%231B0F14'/><polygon points='1060,649 1063,649 1061,664 1058,664' fill='%231B0F14'/><polygon points='1066,649 1070,649 1070,664 1066,664' fill='%231B0F14'/><polygon points='1078,649 1081,649 1079,664 1076,664' fill='%231B0F14'/><polygon points='1084,649 1087,649 1087,664 1084,664' fill='%231B0F14'/><polygon points='1056,641 1052,647 1054,657 1056,649' fill='%231B0F14'/><polygon points='1116,642 1143,642 1145,634 1141,627 1120,627 1114,634' fill='%231B0F14'/><polygon points='1124,628 1131,616 1138,628' fill='%231B0F14'/><polygon points='1140,629 1145,618 1151,608 1155,610 1150,622 1146,634' fill='%231B0F14'/><polygon points='1151,608 1160,611 1161,614 1154,614 1152,612' fill='%231B0F14'/><polygon points='1118,642 1121,642 1121,657 1118,657' fill='%231B0F14'/><polygon points='1124,642 1128,642 1125,657 1122,657' fill='%231B0F14'/><polygon points='1136,642 1139,642 1139,657 1136,657' fill='%231B0F14'/><polygon points='1142,642 1145,642 1143,657 1140,657' fill='%231B0F14'/><polygon points='1114,634 1110,640 1112,650 1114,642' fill='%231B0F14'/><polygon points='1174,641 1201,641 1203,632 1199,626 1178,626 1172,632' fill='%231B0F14'/><polygon points='1182,627 1189,614 1196,627' fill='%231B0F14'/><polygon points='1198,628 1203,616 1209,607 1213,608 1208,621 1204,632' fill='%231B0F14'/><polygon points='1209,607 1218,609 1219,612 1212,612 1210,610' fill='%231B0F14'/><polygon points='1176,641 1179,641 1177,655 1174,655' fill='%231B0F14'/><polygon points='1182,641 1186,641 1186,655 1182,655' fill='%231B0F14'/><polygon points='1194,641 1197,641 1195,655 1192,655' fill='%231B0F14'/><polygon points='1200,641 1203,641 1203,655 1200,655' fill='%231B0F14'/><polygon points='1172,632 1168,638 1170,649 1172,641' fill='%231B0F14'/><polygon points='1232,650 1259,650 1261,641 1257,635 1236,635 1230,641' fill='%231B0F14'/><polygon points='1240,636 1247,624 1254,636' fill='%231B0F14'/><polygon points='1256,637 1261,626 1267,616 1271,617 1266,630 1262,641' fill='%231B0F14'/><polygon points='1267,616 1276,618 1277,621 1270,621 1268,619' fill='%231B0F14'/><polygon points='1234,650 1237,650 1237,664 1234,664' fill='%231B0F14'/><polygon points='1240,650 1244,650 1241,664 1238,664' fill='%231B0F14'/><polygon points='1252,650 1255,650 1255,664 1252,664' fill='%231B0F14'/><polygon points='1258,650 1261,650 1259,664 1256,664' fill='%231B0F14'/><polygon points='1230,641 1226,648 1228,658 1230,650' fill='%231B0F14'/><polygon points='-8,736 0,740 8,743 16,746 24,748 32,751 40,753 48,755 56,756 64,757 72,758 80,759 88,759 96,758 104,758 112,757 120,756 128,755 136,753 144,752 152,750 160,749 168,747 176,745 184,744 192,742 200,741 208,739 216,738 224,737 232,736 240,735 248,735 256,734 264,734 272,734 280,734 288,733 296,733 304,733 312,733 320,733 328,733 336,733 344,732 352,732 360,731 368,730 376,728 384,727 392,725 400,723 408,721 416,719 424,717 432,714 440,711 448,709 456,706 464,703 472,701 480,698 488,696 496,693 504,691 512,690 520,688 528,687 536,686 544,686 552,686 560,686 568,687 576,688 584,690 592,691 600,694 608,696 616,698 624,701 632,704 640,707 648,710 656,713 664,717 672,720 680,722 688,725 696,728 704,730 712,733 720,735 728,736 736,738 744,739 752,740 760,741 768,741 776,742 784,742 792,742 800,742 808,741 816,741 824,741 832,741 840,740 848,740 856,740 864,740 872,740 880,740 888,741 896,741 904,742 912,743 920,744 928,745 936,746 944,747 952,748 960,749 968,750 976,751 984,752 992,753 1000,753 1008,753 1016,753 1024,753 1032,752 1040,751 1048,750 1056,748 1064,747 1072,744 1080,742 1088,739 1096,736 1104,733 1112,730 1120,726 1128,723 1136,719 1144,716 1152,713 1160,709 1168,706 1176,703 1184,701 1192,698 1200,696 1208,694 1216,693 1224,692 1232,691 1240,690 1248,690 1256,690 1264,691 1272,692 1280,693 1288,694 1296,696 1304,697 1312,699 1320,701 1328,703 1336,705 1344,706 1352,708 1360,710 1368,711 1376,713 1384,714 1392,715 1400,716 1408,717 1416,717 1424,718 1432,718 1440,719 1448,719 1448,900 -8,900' fill='url(%23g3)'/><polyline points='-8,736 0,740 8,743 16,746 24,748 32,751 40,753 48,755 56,756 64,757 72,758 80,759 88,759 96,758 104,758 112,757 120,756 128,755 136,753 144,752 152,750 160,749 168,747 176,745 184,744 192,742 200,741 208,739 216,738 224,737 232,736 240,735 248,735 256,734 264,734 272,734 280,734 288,733 296,733 304,733 312,733 320,733 328,733 336,733 344,732 352,732 360,731 368,730 376,728 384,727 392,725 400,723 408,721 416,719 424,717 432,714 440,711 448,709 456,706 464,703 472,701 480,698 488,696 496,693 504,691 512,690 520,688 528,687 536,686 544,686 552,686 560,686 568,687 576,688 584,690 592,691 600,694 608,696 616,698 624,701 632,704 640,707 648,710 656,713 664,717 672,720 680,722 688,725 696,728 704,730 712,733 720,735 728,736 736,738 744,739 752,740 760,741 768,741 776,742 784,742 792,742 800,742 808,741 816,741 824,741 832,741 840,740 848,740 856,740 864,740 872,740 880,740 888,741 896,741 904,742 912,743 920,744 928,745 936,746 944,747 952,748 960,749 968,750 976,751 984,752 992,753 1000,753 1008,753 1016,753 1024,753 1032,752 1040,751 1048,750 1056,748 1064,747 1072,744 1080,742 1088,739 1096,736 1104,733 1112,730 1120,726 1128,723 1136,719 1144,716 1152,713 1160,709 1168,706 1176,703 1184,701 1192,698 1200,696 1208,694 1216,693 1224,692 1232,691 1240,690 1248,690 1256,690 1264,691 1272,692 1280,693 1288,694 1296,696 1304,697 1312,699 1320,701 1328,703 1336,705 1344,706 1352,708 1360,710 1368,711 1376,713 1384,714 1392,715 1400,716 1408,717 1416,717 1424,718 1432,718 1440,719 1448,719' fill='none' stroke='%23F0A070' stroke-width='1.6' stroke-opacity='0.34' stroke-linecap='round' stroke-linejoin='round'/><polygon points='-8,803 0,801 8,799 16,797 24,795 32,793 40,792 48,790 56,789 64,787 72,786 80,785 88,785 96,784 104,784 112,783 120,783 128,783 136,783 144,783 152,783 160,783 168,783 176,783 184,783 192,783 200,783 208,783 216,782 224,782 232,781 240,781 248,780 256,779 264,778 272,776 280,775 288,774 296,772 304,770 312,769 320,767 328,765 336,763 344,761 352,760 360,758 368,756 376,755 384,753 392,752 400,751 408,750 416,750 424,750 432,749 440,750 448,750 456,751 464,752 472,753 480,754 488,756 496,757 504,759 512,761 520,763 528,766 536,768 544,770 552,773 560,775 568,778 576,780 584,782 592,785 600,787 608,788 616,790 624,792 632,793 640,794 648,795 656,796 664,797 672,798 680,798 688,798 696,798 704,798 712,798 720,798 728,798 736,798 744,797 752,797 760,797 768,797 776,797 784,797 792,797 800,797 808,797 816,798 824,798 832,799 840,800 848,800 856,801 864,803 872,804 880,805 888,806 896,808 904,809 912,810 920,811 928,812 936,813 944,814 952,815 960,816 968,816 976,816 984,816 992,816 1000,816 1008,815 1016,814 1024,813 1032,812 1040,810 1048,808 1056,806 1064,804 1072,802 1080,800 1088,797 1096,794 1104,792 1112,789 1120,787 1128,784 1136,781 1144,779 1152,777 1160,774 1168,772 1176,770 1184,769 1192,767 1200,766 1208,765 1216,764 1224,763 1232,762 1240,762 1248,762 1256,762 1264,762 1272,762 1280,763 1288,763 1296,764 1304,765 1312,765 1320,766 1328,767 1336,767 1344,768 1352,768 1360,769 1368,769 1376,769 1384,769 1392,769 1400,769 1408,769 1416,769 1424,768 1432,768 1440,767 1448,766 1448,900 -8,900' fill='url(%23g4)'/><polyline points='-8,803 0,801 8,799 16,797 24,795 32,793 40,792 48,790 56,789 64,787 72,786 80,785 88,785 96,784 104,784 112,783 120,783 128,783 136,783 144,783 152,783 160,783 168,783 176,783 184,783 192,783 200,783 208,783 216,782 224,782 232,781 240,781 248,780 256,779 264,778 272,776 280,775 288,774 296,772 304,770 312,769 320,767 328,765 336,763 344,761 352,760 360,758 368,756 376,755 384,753 392,752 400,751 408,750 416,750 424,750 432,749 440,750 448,750 456,751 464,752 472,753 480,754 488,756 496,757 504,759 512,761 520,763 528,766 536,768 544,770 552,773 560,775 568,778 576,780 584,782 592,785 600,787 608,788 616,790 624,792 632,793 640,794 648,795 656,796 664,797 672,798 680,798 688,798 696,798 704,798 712,798 720,798 728,798 736,798 744,797 752,797 760,797 768,797 776,797 784,797 792,797 800,797 808,797 816,798 824,798 832,799 840,800 848,800 856,801 864,803 872,804 880,805 888,806 896,808 904,809 912,810 920,811 928,812 936,813 944,814 952,815 960,816 968,816 976,816 984,816 992,816 1000,816 1008,815 1016,814 1024,813 1032,812 1040,810 1048,808 1056,806 1064,804 1072,802 1080,800 1088,797 1096,794 1104,792 1112,789 1120,787 1128,784 1136,781 1144,779 1152,777 1160,774 1168,772 1176,770 1184,769 1192,767 1200,766 1208,765 1216,764 1224,763 1232,762 1240,762 1248,762 1256,762 1264,762 1272,762 1280,763 1288,763 1296,764 1304,765 1312,765 1320,766 1328,767 1336,767 1344,768 1352,768 1360,769 1368,769 1376,769 1384,769 1392,769 1400,769 1408,769 1416,769 1424,768 1432,768 1440,767 1448,766' fill='none' stroke='%23D98963' stroke-width='1.6' stroke-opacity='0.34' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1350,774 1350,761' fill='none' stroke='%23140A10' stroke-width='7' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1350,761 1349,747' fill='none' stroke='%23140A10' stroke-width='6.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1349,747 1348,734' fill='none' stroke='%23140A10' stroke-width='6.5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1348,734 1347,720' fill='none' stroke='%23140A10' stroke-width='6.25' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1347,720 1345,706' fill='none' stroke='%23140A10' stroke-width='6' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1345,706 1342,693' fill='none' stroke='%23140A10' stroke-width='5.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1342,693 1340,679' fill='none' stroke='%23140A10' stroke-width='5.5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1340,679 1336,666' fill='none' stroke='%23140A10' stroke-width='5.25' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1336,666 1333,652' fill='none' stroke='%23140A10' stroke-width='5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1333,652 1329,639' fill='none' stroke='%23140A10' stroke-width='4.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1329,639 1324,625' fill='none' stroke='%23140A10' stroke-width='4.5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1324,625 1319,611' fill='none' stroke='%23140A10' stroke-width='4.25' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1319,611 1314,598' fill='none' stroke='%23140A10' stroke-width='4' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1314,598 1308,584' fill='none' stroke='%23140A10' stroke-width='3.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polygon points='1308,584 1302,582 1295,580 1288,578 1282,578 1275,578 1268,580 1262,582 1255,585 1248,589 1242,594 1235,600 1229,606 1222,614 1215,622 1209,630 1202,637 1202,637 1209,630 1215,624 1222,620 1229,615 1235,611 1242,608 1248,605 1255,601 1262,599 1268,596 1275,593 1282,591 1288,589 1295,587 1302,585 1308,584' fill='%23140A10'/><polygon points='1308,584 1303,580 1297,576 1291,572 1286,570 1280,568 1274,567 1269,566 1263,567 1257,568 1252,570 1246,573 1240,577 1235,581 1229,585 1223,590 1218,594 1218,594 1223,590 1229,588 1235,587 1240,586 1246,585 1252,584 1257,584 1263,584 1269,583 1274,583 1280,583 1286,583 1291,583 1297,583 1303,583 1308,584' fill='%23140A10'/><polygon points='1308,584 1306,579 1303,574 1301,570 1298,566 1296,563 1294,560 1291,558 1289,557 1286,557 1284,557 1281,558 1279,559 1277,561 1274,563 1272,565 1269,566 1269,566 1272,565 1274,566 1277,567 1279,568 1281,569 1284,571 1286,572 1289,574 1291,575 1294,576 1296,578 1298,579 1301,580 1303,581 1306,583 1308,584' fill='%23140A10'/><polygon points='1308,584 1309,579 1309,574 1310,570 1311,566 1311,562 1312,560 1313,558 1313,556 1314,556 1314,556 1315,556 1316,557 1316,559 1317,560 1318,562 1318,563 1318,563 1318,562 1317,563 1316,564 1316,566 1315,568 1314,569 1314,571 1313,573 1313,574 1312,576 1311,577 1311,579 1310,580 1309,581 1309,583 1308,584' fill='%23140A10'/><polygon points='1308,584 1312,579 1315,574 1319,570 1323,567 1326,564 1330,562 1333,561 1337,561 1340,561 1344,562 1348,563 1351,566 1355,568 1358,572 1362,575 1365,577 1365,577 1362,575 1358,574 1355,574 1351,575 1348,575 1344,576 1340,576 1337,577 1333,578 1330,579 1326,579 1323,580 1319,581 1315,582 1312,583 1308,584' fill='%23140A10'/><polygon points='1308,584 1314,580 1321,577 1327,574 1333,572 1339,571 1346,571 1352,571 1358,572 1364,574 1371,577 1377,581 1383,585 1390,590 1396,596 1402,602 1408,607 1408,607 1402,602 1396,599 1390,596 1383,594 1377,593 1371,591 1364,590 1358,589 1352,588 1346,587 1339,586 1333,585 1327,585 1321,584 1314,584 1308,584' fill='%23140A10'/><polygon points='1308,584 1315,582 1321,580 1328,579 1335,579 1341,580 1348,582 1355,585 1361,588 1368,593 1375,598 1381,605 1388,612 1395,620 1401,628 1408,637 1415,645 1415,645 1408,637 1401,631 1395,626 1388,621 1381,616 1375,612 1368,608 1361,605 1355,601 1348,598 1341,595 1335,592 1328,590 1321,588 1315,586 1308,584' fill='%23140A10'/><polygon points='1308,584 1303,582 1298,581 1292,581 1287,581 1282,582 1277,584 1271,587 1266,590 1261,594 1256,600 1250,606 1245,612 1240,619 1235,627 1229,635 1224,642 1224,642 1229,635 1235,630 1240,625 1245,621 1250,617 1256,614 1261,610 1266,607 1271,603 1277,600 1282,597 1287,594 1292,591 1298,589 1303,586 1308,584' fill='%23140A10'/><polygon points='1308,584 1314,583 1319,582 1324,582 1330,583 1335,584 1340,586 1346,590 1351,594 1356,599 1362,605 1367,611 1373,618 1378,626 1383,635 1389,644 1394,652 1394,652 1389,644 1383,638 1378,632 1373,627 1367,623 1362,618 1356,614 1351,610 1346,606 1340,603 1335,599 1330,596 1324,592 1319,589 1314,587 1308,584' fill='%23140A10'/><circle cx='1308.2' cy='584.251' r='6' fill='%23140A10'/><polyline points='1420,774 1420,764' fill='none' stroke='%23140A10' stroke-width='7' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1420,764 1420,754' fill='none' stroke='%23140A10' stroke-width='6.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1420,754 1421,744' fill='none' stroke='%23140A10' stroke-width='6.5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1421,744 1421,734' fill='none' stroke='%23140A10' stroke-width='6.25' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1421,734 1422,724' fill='none' stroke='%23140A10' stroke-width='6' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1422,724 1423,714' fill='none' stroke='%23140A10' stroke-width='5.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1423,714 1424,704' fill='none' stroke='%23140A10' stroke-width='5.5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1424,704 1425,694' fill='none' stroke='%23140A10' stroke-width='5.25' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1425,694 1426,684' fill='none' stroke='%23140A10' stroke-width='5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1426,684 1427,674' fill='none' stroke='%23140A10' stroke-width='4.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1427,674 1429,664' fill='none' stroke='%23140A10' stroke-width='4.5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1429,664 1430,654' fill='none' stroke='%23140A10' stroke-width='4.25' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1430,654 1432,644' fill='none' stroke='%23140A10' stroke-width='4' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='1432,644 1434,634' fill='none' stroke='%23140A10' stroke-width='3.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polygon points='1434,634 1427,632 1421,630 1414,628 1407,628 1401,628 1394,630 1388,632 1381,635 1374,639 1368,644 1361,650 1354,656 1348,664 1341,672 1334,680 1328,687 1328,687 1334,680 1341,674 1348,670 1354,665 1361,662 1368,658 1374,655 1381,652 1388,649 1394,646 1401,643 1407,641 1414,639 1421,637 1427,635 1434,634' fill='%23140A10'/><polygon points='1434,634 1428,630 1423,626 1417,623 1411,620 1406,618 1400,617 1394,617 1389,617 1383,618 1378,620 1372,623 1366,627 1361,631 1355,635 1349,640 1344,644 1344,644 1349,640 1355,638 1361,637 1366,636 1372,635 1378,634 1383,634 1389,634 1394,633 1400,633 1406,633 1411,633 1417,633 1423,633 1428,634 1434,634' fill='%23140A10'/><polygon points='1434,634 1432,629 1429,624 1427,620 1424,616 1422,613 1419,610 1417,608 1415,607 1412,607 1410,607 1407,608 1405,609 1402,611 1400,613 1397,615 1395,617 1395,617 1397,615 1400,616 1402,617 1405,618 1407,619 1410,621 1412,622 1415,624 1417,625 1419,626 1422,628 1424,629 1427,630 1429,631 1432,633 1434,634' fill='%23140A10'/><polygon points='1434,634 1435,629 1435,624 1436,620 1437,616 1437,613 1438,610 1438,608 1439,607 1440,606 1440,606 1441,606 1442,607 1442,609 1443,611 1443,612 1444,613 1444,613 1443,612 1443,613 1442,615 1442,616 1441,618 1440,620 1440,621 1439,623 1438,625 1438,626 1437,628 1437,629 1436,630 1435,631 1435,633 1434,634' fill='%23140A10'/><polygon points='1434,634 1438,629 1441,625 1445,621 1448,617 1452,614 1455,612 1459,611 1463,611 1466,611 1470,612 1473,613 1477,616 1481,618 1484,622 1488,625 1491,627 1491,627 1488,625 1484,624 1481,624 1477,625 1473,625 1470,626 1466,626 1463,627 1459,628 1455,629 1452,629 1448,630 1445,631 1441,632 1438,633 1434,634' fill='%23140A10'/><polygon points='1434,634 1440,630 1447,627 1453,624 1459,622 1465,621 1472,621 1478,621 1484,622 1490,625 1497,627 1503,631 1509,636 1515,641 1522,646 1528,652 1534,657 1534,657 1528,652 1522,649 1515,646 1509,645 1503,643 1497,641 1490,640 1484,639 1478,638 1472,637 1465,636 1459,635 1453,635 1447,634 1440,634 1434,634' fill='%23140A10'/><polygon points='1434,634 1441,632 1447,630 1454,630 1461,630 1467,630 1474,632 1481,635 1487,639 1494,643 1500,649 1507,655 1514,662 1520,670 1527,678 1534,687 1540,695 1540,695 1534,687 1527,681 1520,676 1514,671 1507,667 1500,662 1494,659 1487,655 1481,652 1474,648 1467,645 1461,643 1454,640 1447,638 1441,636 1434,634' fill='%23140A10'/><polygon points='1434,634 1429,633 1424,631 1418,631 1413,631 1408,632 1403,634 1397,637 1392,640 1387,645 1382,650 1376,656 1371,662 1366,670 1361,677 1355,685 1350,693 1350,693 1355,685 1361,680 1366,676 1371,671 1376,667 1382,664 1387,660 1392,657 1397,653 1403,650 1408,647 1413,644 1418,641 1424,639 1429,636 1434,634' fill='%23140A10'/><polygon points='1434,634 1439,633 1445,632 1450,632 1455,633 1461,634 1466,637 1472,640 1477,644 1482,649 1488,655 1493,661 1498,669 1504,677 1509,685 1514,694 1520,702 1520,702 1514,694 1509,688 1504,683 1498,678 1493,673 1488,669 1482,664 1477,660 1472,657 1466,653 1461,649 1455,646 1450,643 1445,639 1439,637 1434,634' fill='%23140A10'/><circle cx='1434' cy='634.407' r='6' fill='%23140A10'/><polyline points='86,791 86,782' fill='none' stroke='%23140A10' stroke-width='7' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='86,782 86,774' fill='none' stroke='%23140A10' stroke-width='6.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='86,774 87,765' fill='none' stroke='%23140A10' stroke-width='6.5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='87,765 88,757' fill='none' stroke='%23140A10' stroke-width='6.25' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='88,757 89,748' fill='none' stroke='%23140A10' stroke-width='6' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='89,748 90,739' fill='none' stroke='%23140A10' stroke-width='5.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='90,739 92,731' fill='none' stroke='%23140A10' stroke-width='5.5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='92,731 94,722' fill='none' stroke='%23140A10' stroke-width='5.25' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='94,722 96,714' fill='none' stroke='%23140A10' stroke-width='5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='96,714 98,705' fill='none' stroke='%23140A10' stroke-width='4.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='98,705 101,697' fill='none' stroke='%23140A10' stroke-width='4.5' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='101,697 104,688' fill='none' stroke='%23140A10' stroke-width='4.25' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='104,688 107,679' fill='none' stroke='%23140A10' stroke-width='4' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polyline points='107,679 110,671' fill='none' stroke='%23140A10' stroke-width='3.75' stroke-opacity='1' stroke-linecap='round' stroke-linejoin='round'/><polygon points='110,671 103,668 97,666 90,665 83,664 77,665 70,666 64,668 57,672 50,676 44,681 37,686 30,693 24,700 17,708 10,716 4,724 4,724 10,716 17,711 24,706 30,702 37,698 44,694 50,691 57,688 64,685 70,682 77,680 83,677 90,675 97,673 103,672 110,671' fill='%23140A10'/><polygon points='110,671 104,666 99,662 93,659 87,656 82,655 76,653 70,653 65,654 59,655 54,657 48,660 42,663 37,667 31,672 25,677 20,680 20,680 25,677 31,674 37,673 42,672 48,671 54,671 59,670 65,670 70,670 76,670 82,669 87,669 93,669 99,670 104,670 110,671' fill='%23140A10'/><polygon points='110,671 108,666 105,661 103,656 100,652 98,649 95,647 93,645 91,644 88,643 86,643 83,644 81,645 78,647 76,650 73,652 71,653 71,653 73,652 76,652 78,653 81,654 83,656 86,657 88,659 91,660 93,662 95,663 98,664 100,665 103,667 105,668 108,669 110,671' fill='%23140A10'/><polygon points='110,671 111,666 111,661 112,656 113,652 113,649 114,646 114,644 115,643 116,642 116,642 117,643 118,644 118,645 119,647 119,649 120,650 120,650 119,649 119,650 118,651 118,653 117,654 116,656 116,658 115,659 114,661 114,663 113,664 113,665 112,667 111,668 111,669 110,671' fill='%23140A10'/><polygon points='110,671 114,666 117,661 121,657 124,654 128,651 131,649 135,648 139,647 142,647 146,648 149,650 153,652 157,655 160,658 164,662 167,664 167,664 164,662 160,661 157,661 153,661 149,662 146,662 142,663 139,664 135,664 131,665 128,666 124,667 121,667 117,668 114,669 110,671' fill='%23140A10'/><polygon points='110,671 116,667 123,663 129,661 135,659 141,658 148,657 154,658 160,659 166,661 173,664 179,668 185,672 191,677 198,683 204,688 210,693 210,693 204,688 198,685 191,683 185,681 179,679 173,678 166,677 160,675 154,674 148,673 141,672 135,672 129,671 123,671 116,671 110,671' fill='%23140A10'/><polygon points='110,671 117,669 123,667 130,666 137,666 143,667 150,669 157,671 163,675 170,680 176,685 183,691 190,698 196,706 203,715 210,724 216,732 216,732 210,724 203,717 196,712 190,707 183,703 176,699 170,695 163,691 157,688 150,685 143,682 137,679 130,676 123,674 117,672 110,671' fill='%23140A10'/><polygon points='110,671 105,669 100,668 94,667 89,668 84,669 79,671 73,673 68,677 63,681 58,686 52,692 47,699 42,706 37,714 31,722 26,729 26,729 31,722 37,717 42,712 47,708 52,704 58,700 63,697 68,693 73,690 79,687 84,684 89,681 94,678 100,675 105,673 110,671' fill='%23140A10'/><polygon points='110,671 115,669 121,669 126,669 131,669 137,671 142,673 148,676 153,680 158,685 164,691 169,698 174,705 180,713 185,722 190,730 196,738 196,738 190,730 185,724 180,719 174,714 169,709 164,705 158,701 153,697 148,693 142,689 137,686 131,682 126,679 121,676 115,673 110,671' fill='%23140A10'/><circle cx='110' cy='670.864' r='6' fill='%23140A10'/><polygon points='-8,868 0,868 8,868 16,868 24,867 32,867 40,866 48,865 56,864 64,863 72,862 80,861 88,860 96,858 104,857 112,855 120,854 128,852 136,850 144,849 152,847 160,845 168,844 176,842 184,840 192,839 200,837 208,836 216,835 224,833 232,832 240,831 248,830 256,829 264,829 272,828 280,828 288,828 296,827 304,827 312,827 320,828 328,828 336,828 344,829 352,829 360,830 368,831 376,832 384,833 392,833 400,834 408,835 416,836 424,837 432,838 440,839 448,840 456,841 464,842 472,842 480,843 488,844 496,844 504,845 512,845 520,846 528,846 536,847 544,847 552,847 560,847 568,847 576,848 584,848 592,848 600,848 608,848 616,848 624,848 632,848 640,848 648,849 656,849 664,849 672,850 680,850 688,851 696,851 704,852 712,853 720,853 728,854 736,855 744,856 752,857 760,858 768,859 776,860 784,861 792,863 800,864 808,865 816,866 824,867 832,868 840,869 848,870 856,871 864,872 872,872 880,873 888,874 896,874 904,874 912,874 920,874 928,874 936,874 944,873 952,873 960,872 968,871 976,870 984,869 992,868 1000,867 1008,865 1016,864 1024,863 1032,861 1040,859 1048,858 1056,856 1064,855 1072,853 1080,851 1088,850 1096,848 1104,847 1112,845 1120,844 1128,843 1136,841 1144,840 1152,839 1160,838 1168,838 1176,837 1184,836 1192,836 1200,835 1208,835 1216,835 1224,835 1232,835 1240,835 1248,835 1256,835 1264,835 1272,836 1280,836 1288,836 1296,837 1304,837 1312,837 1320,838 1328,838 1336,838 1344,838 1352,839 1360,839 1368,839 1376,839 1384,839 1392,839 1400,839 1408,839 1416,839 1424,839 1432,839 1440,839 1448,838 1448,900 -8,900' fill='url(%23g5)'/><polyline points='-8,868 0,868 8,868 16,868 24,867 32,867 40,866 48,865 56,864 64,863 72,862 80,861 88,860 96,858 104,857 112,855 120,854 128,852 136,850 144,849 152,847 160,845 168,844 176,842 184,840 192,839 200,837 208,836 216,835 224,833 232,832 240,831 248,830 256,829 264,829 272,828 280,828 288,828 296,827 304,827 312,827 320,828 328,828 336,828 344,829 352,829 360,830 368,831 376,832 384,833 392,833 400,834 408,835 416,836 424,837 432,838 440,839 448,840 456,841 464,842 472,842 480,843 488,844 496,844 504,845 512,845 520,846 528,846 536,847 544,847 552,847 560,847 568,847 576,848 584,848 592,848 600,848 608,848 616,848 624,848 632,848 640,848 648,849 656,849 664,849 672,850 680,850 688,851 696,851 704,852 712,853 720,853 728,854 736,855 744,856 752,857 760,858 768,859 776,860 784,861 792,863 800,864 808,865 816,866 824,867 832,868 840,869 848,870 856,871 864,872 872,872 880,873 888,874 896,874 904,874 912,874 920,874 928,874 936,874 944,873 952,873 960,872 968,871 976,870 984,869 992,868 1000,867 1008,865 1016,864 1024,863 1032,861 1040,859 1048,858 1056,856 1064,855 1072,853 1080,851 1088,850 1096,848 1104,847 1112,845 1120,844 1128,843 1136,841 1144,840 1152,839 1160,838 1168,838 1176,837 1184,836 1192,836 1200,835 1208,835 1216,835 1224,835 1232,835 1240,835 1248,835 1256,835 1264,835 1272,836 1280,836 1288,836 1296,837 1304,837 1312,837 1320,838 1328,838 1336,838 1344,838 1352,839 1360,839 1368,839 1376,839 1384,839 1392,839 1400,839 1408,839 1416,839 1424,839 1432,839 1440,839 1448,838' fill='none' stroke='%23B86D4E' stroke-width='1.6' stroke-opacity='0.34' stroke-linecap='round' stroke-linejoin='round'/></g></svg>");
}

/* Atmosphere preview thumbnails — tiny subset (photo/sky/shade only, no SVG
   scenes) so every .atmo button shows its own theme even when that theme's
   full file isn't loaded. Scoped to .atmo: zero effect on page theming. */
.atmo[data-theme="night"]{--sky:linear-gradient(180deg,#04060C 0%,#0A0E19 50%,#141D36 100%);--photo:url("../img/night.png");--shade:linear-gradient(180deg,rgba(2,4,8,.46),rgba(2,4,8,.24) 45%,rgba(2,4,8,.5))}
.atmo[data-theme="sea"]{--sky:linear-gradient(180deg,#041820 0%,#08303D 45%,#155A6C 62%,#031A23 100%);--photo:url("../img/sea.png");--shade:linear-gradient(180deg,rgba(2,4,8,.38),rgba(2,4,8,.18) 45%,rgba(2,4,8,.42))}
.atmo[data-theme="dunes"]{--sky:linear-gradient(180deg,#140C14 0%,#2A1622 38%,#6A3A3C 66%,#B8694A 80%,#5A2E30 100%);--shade:linear-gradient(180deg,rgba(2,4,8,.38),rgba(2,4,8,.18) 45%,rgba(2,4,8,.42))}
.atmo[data-theme="forest"]{--sky:linear-gradient(180deg,#06100B 0%,#0B1712 50%,#15291F 85%,#06100B 100%);--photo:url("../img/forest.png");--shade:linear-gradient(180deg,rgba(2,4,8,.38),rgba(2,4,8,.18) 45%,rgba(2,4,8,.42))}
.atmo[data-theme="dawn"]{--sky:linear-gradient(180deg,#E9E1F2 0%,#F4E2E4 42%,#F8DDC9 70%,#EFC9BE 100%);--photo:url("../img/dawn.png");--shade:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 45%,rgba(120,70,50,.16))}
.atmo[data-theme="paper"]{--sky:linear-gradient(180deg,#F5F6F7 0%,#F5F6F7 100%);--photo:url("../img/paper.png");--shade:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.12) 50%,rgba(255,255,255,.30))}
/* Reset & base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Document base */
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  height:100%;overflow:hidden;
  background:var(--canvas);color:var(--text);
  font-family:var(--f-sans);font-size:var(--t-body);line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-wrap:break-word;
  transition:background-color var(--d3) var(--ease),color var(--d3) var(--ease);
}
[hidden]{display:none!important}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
ul,ol{list-style:none}
img,video,svg{display:block;max-width:100%}
svg{flex-shrink:0}

/* Form + button reset */
button,input,textarea,select{font:inherit;color:inherit;}
button{
  background:none;border:0;cursor:pointer;text-align:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
input,textarea{background:none;border:0;border-radius:0}
input[type="search"]{-webkit-appearance:none;appearance:none}
input[type="search"]::-webkit-search-cancel-button{display:none}

/* Focus + selection */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
#pinput:focus-visible,.field input:focus-visible,.set-field input:focus-visible{outline:none}
::selection{background:var(--accent-wash-2);color:var(--text)}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--border-3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border:3px solid transparent;border-radius:var(--rf);background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--border-3);background-clip:content-box}


/* Tooltips (data-tip) */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;z-index:70;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  padding:5px 10px;border-radius:var(--r1);
  background:var(--surface-3);border:1px solid var(--border-2);box-shadow:var(--shadow-2);
  color:var(--text);font-size:var(--t-xs);font-weight:500;line-height:1.5;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--d2) var(--ease),visibility var(--d2);
}
.tip-up::after{top:auto;bottom:calc(100% + 8px)}
.tip-up.tip-start::after{left:auto;inset-inline-start:0;transform:none}
.tip-up.tip-end::after{left:auto;inset-inline-end:0;transform:none}
@media (hover:hover){
  [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transition-delay:.35s,.35s}
  [data-tip][aria-expanded="true"]::after,[data-tip]:disabled::after{display:none}
}

/* Utilities */
.muted{color:var(--text-3);font-size:var(--t-sm)}

/* Glass tokens */

/* App shell */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:var(--shade,none),var(--photo,none) center/cover no-repeat,var(--sky,var(--canvas))}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:var(--scene,none) var(--scene-x,50%) bottom/cover no-repeat}
#app{position:relative;z-index:2;display:flex;height:100vh;height:100dvh;isolation:isolate}

/* Sidebar */
#sidebar{
  position:fixed;top:0;bottom:0;left:0;z-index:40;
  width:min(86vw,320px);
  display:flex;flex-direction:column;
  background:var(--sidebar);
  border-right:1px solid var(--border-2);
  padding-top:var(--sa-top);padding-bottom:var(--sa-bottom);
  transform:translateX(-100%);
  transition:transform var(--d3) var(--ease);
  will-change:transform;
  box-shadow: 8px 0 32px rgba(0,0,0,0.28), 1px 0 0 rgba(255,255,255,0.04) inset;
}
[dir="rtl"] #sidebar{
  left:auto;right:0;
  border-right:none;border-left:1px solid var(--border-2);
  transform:translateX(100%);
  box-shadow: -8px 0 32px rgba(0,0,0,0.28), -1px 0 0 rgba(255,255,255,0.04) inset;
}
#sidebar.open{transform:translateX(0)}
[dir="rtl"] #sidebar.open{transform:translateX(0)}
#scrim{
  position:fixed;inset:0;z-index:35;
  background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;
  transition:opacity var(--d3) var(--ease),visibility var(--d3);
}
#scrim.open{opacity:1;visibility:visible}

.sb-top{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--topbar-h);padding-inline:var(--s4) var(--s3);flex-shrink:0;
}
.brand{display:flex;align-items:center;gap:var(--s3)}
.brand-logo{width:30px;height:30px;border-radius:9px;flex:none}
.tb-brand .brand-logo{width:24px;height:24px;border-radius:7px}
.brand-mark{
  width:34px;height:34px;border-radius:var(--r3);
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;flex-shrink:0;
}
.brand-mark svg{width:20px;height:20px}
.brand-word{display:flex;align-items:baseline;gap:var(--s2);line-height:1}
.brand-word b{font-family:'Tajawal',sans-serif;font-size:2.1rem;font-weight:800;color:var(--text)}
.brand-word i{font-style:normal;font-size:var(--t-sm);font-weight:500;color:var(--text-3);letter-spacing:.04em}
.tb-brand{display:none;align-items:center;gap:var(--s2)}
.tb-brand .brand-mark{width:28px;height:28px;border-radius:var(--r2)}
.tb-brand .brand-mark svg{width:17px;height:17px}
.tb-brand .brand-word b{font-size:1.2rem}

.sb-actions{padding:var(--s2) var(--s3) var(--s3);display:flex;flex-direction:column;gap:var(--s2);flex-shrink:0}
.field{display:flex;align-items:center;gap:var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:0 var(--s3);height:38px;min-width:0}
.field svg{width:16px;height:16px;flex-shrink:0;color:var(--text-4)}
.field input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-size:var(--t-sm)}
.field input::placeholder{color:var(--text-4)}
#new-chat-btn{
  justify-content:flex-start;height:40px;
  background:var(--surface);border-color:var(--border-2);color:var(--text);
}
#new-chat-btn:hover{background:var(--surface-2);border-color:var(--border-3)}
#new-chat-btn svg{width:16px;height:16px;flex-shrink:0;color:var(--accent)}
.ibtn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:var(--r2);color:var(--text-3);transition:background var(--d1) var(--ease),color var(--d1) var(--ease)}
.ibtn:hover{background:var(--surface-hover);color:var(--text)}
.ibtn svg{width:18px;height:18px;flex-shrink:0}

#history{flex:1;min-height:0;overflow-y:auto;padding:0 var(--s3) var(--s4);overscroll-behavior:contain}
#history .group-label{font-size:var(--t-xs);font-weight:700;color:var(--text-4);padding:var(--s3) var(--s2) var(--s1)}
#history .group-label:first-child{padding-top:var(--s2)}

.chat-item{
  position:relative;display:flex;align-items:center;gap:var(--s2);
  height:36px;padding-inline:var(--s3) var(--s1);
  border-radius:var(--r2);
  color:var(--text-2);font-size:var(--t-sm);
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease);
  cursor:pointer;
}
.chat-item:hover{background:var(--surface-hover);color:var(--text)}
.chat-item:active{background:var(--surface-press)}
.chat-item.active{background:var(--surface-2);color:var(--text);font-weight:500}
.chat-item.active::before{
  content:'';position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:2px;height:16px;border-radius:var(--rf);background:var(--accent);
}
.chat-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
[dir="rtl"] .chat-title{text-align:right}
.chat-del{
  width:26px;height:26px;border-radius:var(--r1);flex-shrink:0;
  display:grid;place-items:center;color:var(--text-4);
  opacity:0;transition:opacity var(--d1),color var(--d1),background var(--d1);
}
.chat-del svg{width:13px;height:13px}
.chat-item:hover .chat-del,.chat-del:focus-visible{opacity:1}
@media (hover:none){.chat-del{opacity:1}}
.chat-del:hover{background:var(--danger-wash);color:var(--danger)}

.sb-empty{padding:var(--s6) var(--s3);text-align:start}
.sb-empty p{font-size:var(--t-sm);color:var(--text-3);line-height:1.6}
.sb-empty strong{display:block;color:var(--text-2);font-weight:500;margin-bottom:var(--s1)}

.sb-bottom{
  flex-shrink:0;padding:var(--s3);
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:2px;
}
.sb-row{
  display:flex;align-items:center;gap:var(--s3);
  height:36px;padding:0 var(--s3);border-radius:var(--r2);
  font-size:var(--t-sm);color:var(--text-2);width:100%;text-align:start;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease);
}
.sb-row:hover{background:var(--surface-hover);color:var(--text)}
.sb-row svg{width:16px;height:16px;color:var(--text-4)}
.sb-row:hover svg{color:var(--text-3)}
.sb-row .sb-count{
  margin-inline-start:auto;font-size:var(--t-xs);color:var(--text-4);
  font-variant-numeric:tabular-nums;
}

/* Main column */
#main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}

#topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  height:calc(var(--topbar-h) + var(--sa-top));
  padding:var(--sa-top) var(--s4) 0;
  display:flex;align-items:center;gap:var(--s3);
  background:color-mix(in srgb,var(--canvas) 74%,transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color var(--d3) var(--ease),background var(--d3) var(--ease);
}
#topbar.scrolled{border-bottom-color:var(--border);background:color-mix(in srgb,var(--canvas) 88%,transparent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #topbar{background:var(--canvas)}
}
#tb-title{
  flex:1;min-width:0;
  font-size:var(--t-ui);font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:0 var(--s2);text-align:start;
}
.tb-right{display:flex;align-items:center;gap:var(--s1);flex-shrink:0}
/* desktop sidebar toggle: hidden everywhere except wide screens
   (the min-width query above re-shows it). independent of the
   only-desktop utility so a broken media merge can't leak it. */
#sb-toggle{display:none}

/* status chip + popover */
.status-chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  height:32px;padding:0 var(--s3);
  border-radius:var(--r2);border:1px solid var(--border);
  background:var(--surface);color:var(--text-2);
  font-size:var(--t-sm);font-weight:500;
  transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease),color var(--d1);
}
.status-chip:hover{background:var(--surface-2);border-color:var(--border-2);color:var(--text)}
.status-chip[aria-expanded="true"]{background:var(--surface-2);border-color:var(--border-2);color:var(--text)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
[data-state="busy"] .dot{background:var(--accent-2);animation:breathe 1.4s var(--ease-io) infinite}
[data-state="error"] .dot{background:var(--danger)}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

.popover{
  position:absolute;z-index:60;
  min-width:250px;padding:var(--s3);
  background:var(--surface-3);
  border:1px solid var(--border-2);
  border-radius:var(--r3);
  box-shadow:var(--shadow-3);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);
  transform-origin:top;
  transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease),visibility var(--d2);
}
.popover.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
#model-pop{top:calc(var(--topbar-h) + var(--sa-top) - 6px);inset-inline-end:var(--s3)}
.pop-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding:var(--s2) var(--s1)}
.pop-row dt{font-size:var(--t-sm);color:var(--text-3)}
.pop-row dd{font-size:var(--t-sm);color:var(--text);font-weight:500;text-align:end;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pop-sep{height:1px;background:var(--border);margin:var(--s2) 0}
.pop-note{padding:var(--s1);font-size:var(--t-xs);color:var(--text-3);line-height:1.55}

/* Message scroller */
#messages{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-top:calc(var(--topbar-h) + var(--sa-top));
  padding-bottom:var(--s7);
  scroll-behavior:smooth;
}
.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);width:100%}

/* Welcome / hero */
#welcome{
  min-height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--s8) var(--s7);
}
.display{font-family:var(--f-serif);font-size:var(--t-display);font-weight:700;line-height:1.35}
.h1{font-family:var(--f-serif);font-size:var(--t-h1);font-weight:500;margin:0}
.skip{position:fixed;top:-60px;inset-inline-start:var(--s4);z-index:200;background:var(--surface-3);border:1px solid var(--border-2);color:var(--text);padding:var(--s2) var(--s4);border-radius:var(--r2);font-size:var(--t-sm);transition:top var(--d2) var(--ease)}
.skip:focus-visible{top:var(--s3)}
.hero-title{margin-bottom:var(--s7)}
.hero-title .l2{display:block;color:var(--text-3);font-weight:500}
#welcome .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}

.cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3);margin-bottom:var(--s6);width:100%;max-width:34rem;
}
.card{
  position:relative;text-align:start;
  padding:var(--s4);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r3);
  transition:background var(--d2) var(--ease),border-color var(--d2) var(--ease),transform var(--d2) var(--ease);
}
.card:hover{background:var(--surface-2);border-color:var(--border-2)}
.card:active{transform:translateY(0);background:var(--surface-press)}
.card-h{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.card-h svg{width:15px;height:15px;color:var(--accent);opacity:.85}
.card-h span{font-size:var(--t-h3);font-weight:700;color:var(--text)}
.card-d{display:block;font-size:var(--t-sm);color:var(--text-3);line-height:1.5}

.quick{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
.qchip{
  height:32px;padding:0 var(--s3);
  border-radius:var(--r2);
  border:1px solid var(--border);
  background:transparent;color:var(--text-3);
  font-size:var(--t-sm);
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease);
}
.qchip:hover{background:var(--surface);color:var(--text-2);border-color:var(--border-2)}

/* one orchestrated entrance, first paint only */

/* Messages */
.mrow{padding-block:18px}
.mrow + .mrow{padding-top:8px}
.mrow.user .wrap{display:flex;justify-content:flex-end}
.ubub{
  max-width:min(72%,32rem);
  background:var(--surface-2);
  border:1px solid var(--border-2);
  border-radius:var(--r4);border-end-end-radius:var(--r1);text-align:start;
  padding:14px 18px;
  font-size:15px;line-height:1.65;
  white-space:pre-wrap;overflow-wrap:anywhere;
  color:var(--text);
}
.mrow.assistant .wrap{display:flex;gap:var(--s4);align-items:flex-start}
.avatar{
  width:30px;height:30px;border-radius:var(--r2);flex-shrink:0;margin-top:2px;
  background:var(--surface-2);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--accent);
}
.avatar svg{width:15px;height:15px}
.acol{flex:1;min-width:0}

/* rendered markdown */
.aic{
  font-size:15px;line-height:1.7;color:var(--text);overflow-wrap:anywhere;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r3);padding:14px 16px;
  max-width:100%;
}
.aic>*:first-child{margin-top:0}
.aic>*:last-child{margin-bottom:0}
.aic p{margin:0 0 .85em}
.aic h1{font-size:1.25rem;font-weight:700;margin:1.4em 0 .5em}
.aic h2{font-size:1.0625rem;font-weight:700;margin:1.3em 0 .45em}
.aic h3{font-size:.9375rem;font-weight:700;margin:1.2em 0 .4em}
.aic ul,.aic ol{padding-inline-start:1.5em;margin:0 0 .85em}
.aic ul{list-style:disc}
.aic ol{list-style:decimal}
.aic li{margin:.3em 0}
.aic li::marker{color:var(--text-4)}
.aic strong{font-weight:700}
.aic em{font-style:italic}
.aic button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
button:disabled{cursor:not-allowed}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--accent-dim)}
.aic a:hover{text-decoration-color:var(--accent)}
.aic hr{border:none;border-top:1px solid var(--border);margin:1.4em 0}
.aic blockquote{
  border-inline-start:2px solid var(--border-3);
  padding-block:.1em;padding-inline-start:var(--s4);margin:0 0 .85em;
  color:var(--text-2);font-style:italic;
}
.aic img{max-width:100%;height:auto;border-radius:var(--r3);border:1px solid var(--border);display:block}
.aic code:not(pre code){
  background:var(--surface-2);border:1px solid var(--border);
  padding:.12em .38em;border-radius:var(--r1);
  font-family:var(--f-mono);font-size:.86em;
}
.aic pre{
  background:var(--code-bg);border:1px solid var(--border-2);
  border-radius:12px;margin:1em 0;overflow:hidden;direction:ltr;text-align:left;
}
.aic .ch{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) var(--s2) var(--s2) var(--s4);
  background:var(--code-head);border-bottom:1px solid var(--border);
}
.aic .ch-lang{font-size:var(--t-xs);color:var(--text-3);font-family:var(--f-mono)}
.aic pre code{
  display:block;padding:var(--s4);overflow-x:auto;
  font-family:var(--f-mono);font-size:.8125rem;line-height:1.65;color:var(--text-2);
}
.cpbtn{
  display:inline-flex;align-items:center;gap:5px;
  height:26px;padding:0 var(--s2);border-radius:var(--r1);
  color:var(--text-3);font-size:var(--t-xs);font-weight:500;
  transition:background var(--d1),color var(--d1);
}
.cpbtn svg{width:12px;height:12px}
.ch-acts{display:flex;align-items:center;gap:2px}
.dlbtn svg{width:12px;height:12px}
@media (max-width:480px){.ch-acts .cpbtn span{display:none}.ch-acts .cpbtn{padding:0 7px}}
.cpbtn:hover{background:var(--surface-hover);color:var(--text)}
.runout{border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;background:var(--code-bg);padding:10px 14px;font-family:var(--f-mono);font-size:.78rem}
.aic pre:has(+ .runout){border-radius:10px 10px 0 0;margin-bottom:0}
.runline{margin:6px 0}
.runline>span{display:inline-block;font-size:.65rem;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1px 7px;margin-bottom:4px}
.runline.error>span{color:#f87171;border-color:rgba(248,113,113,.3)}
.runline pre{white-space:pre-wrap;word-break:break-word;color:var(--text-2);margin:0}
.runexit{font-size:.68rem;color:var(--text-dim);margin-top:6px}
.htmlpreview{width:100%;height:320px;border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;background:#fff}
.tbl-wrap{overflow-x:auto;margin:0 0 1em;border:1px solid var(--border);border-radius:var(--r3)}
.aic table{border-collapse:collapse;width:100%;font-size:var(--t-sm)}
.aic th,.aic td{padding:var(--s2) var(--s3);text-align:start;border-bottom:1px solid var(--border)}
.aic th{background:var(--surface);font-weight:700;color:var(--text-2)}
.aic tr:last-child td{border-bottom:none}

/* streaming caret */
.streaming .aic>*:last-child:not(.thinking)::after{
  content:'';display:inline-block;vertical-align:-2px;
  width:2px;height:1.05em;margin-inline-start:3px;background:var(--accent);
  animation:caret 1s steps(1) infinite;
}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}

/* message actions */
.mact{display:flex;gap:var(--s1);margin-top:var(--s3);opacity:0;transition:opacity var(--d2) var(--ease)}
.mrow:hover .mact,.mact:focus-within{opacity:1}
@media (hover:none){.mact{opacity:1}}
.mact-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 var(--s2);border-radius:var(--r1);
  color:var(--text-3);font-size:var(--t-xs);font-weight:500;
  transition:background var(--d1),color var(--d1);
}
.mact-btn svg{width:13px;height:13px}
.mact-btn:hover{background:var(--surface-hover);color:var(--text-2)}

/* thinking + loading states */
.thinking{display:flex;align-items:center;gap:var(--s3);height:26px}
.tdots{display:flex;gap:4px}
.tdots i{width:5px;height:5px;border-radius:50%;background:var(--text-4);animation:tdot 1.1s var(--ease-io) infinite}
.tdots i:nth-child(2){animation-delay:.14s}
.tdots i:nth-child(3){animation-delay:.28s}
@keyframes tdot{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
.thinking span{font-size:var(--t-sm);color:var(--text-3)}

.skeleton{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);
}
.skeleton::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,var(--surface-hover) 50%,transparent 80%);
  animation:shimmer 1.6s linear infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.img-skeleton{aspect-ratio:1/1;max-width:340px;width:100%}
.skeleton-label{
  position:absolute;inset:auto 0 0;z-index:1;
  padding:var(--s3);font-size:var(--t-sm);color:var(--text-3);
}

/* inline error */
.err{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s3) var(--s4);
  background:var(--danger-wash);
  border:1px solid transparent;border-radius:var(--r3);
}
.err svg{width:16px;height:16px;color:var(--danger);margin-top:2px}
.err-body{min-width:0}
.err-title{font-size:var(--t-ui);font-weight:700;color:var(--text);margin-bottom:2px}
.err-msg{font-size:var(--t-sm);color:var(--text-2);line-height:1.55;overflow-wrap:anywhere}

/* attachments on a user message */
.fimg{max-width:200px;max-height:170px;border-radius:var(--r2);border:1px solid var(--border);margin-bottom:var(--s2);object-fit:cover}
.fchip{
  display:inline-flex;align-items:center;gap:var(--s2);
  max-width:100%;padding:6px var(--s3);margin-bottom:var(--s2);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);
}
.fchip svg{width:14px;height:14px;color:var(--accent)}
.fchip-name{font-size:var(--t-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.fchip-sub{font-size:var(--t-xs);color:var(--text-4);flex-shrink:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.fchip-sz{font-size:var(--t-xs);color:var(--text-4);flex-shrink:0;font-variant-numeric:tabular-nums}
.fchip-dl{width:100%;text-align:start;cursor:pointer;transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.fchip-dl:hover{background:var(--surface-3);border-color:var(--border-2)}
.fchip-act{display:grid;place-items:center;flex-shrink:0;margin-inline-start:2px;color:var(--text-4);opacity:0;transition:opacity var(--d1) var(--ease),color var(--d1) var(--ease)}
.fchip-act svg{width:13px;height:13px;color:inherit}
.fchip-dl:hover .fchip-act,.fchip-dl:focus-visible .fchip-act{opacity:1;color:var(--accent)}

.fimg-box{position:relative;display:inline-block;margin-bottom:var(--s2);line-height:0}
.fimg-box .fimg{margin-bottom:0}
.fimg-dl{
  position:absolute;inset-block-start:6px;inset-inline-end:6px;
  width:30px;height:30px;display:grid;place-items:center;
  border-radius:var(--r1);color:#fff;
  background:rgba(12,14,11,.72);
  opacity:0;transition:opacity var(--d1) var(--ease),background var(--d1) var(--ease);
}
.fimg-dl svg{width:15px;height:15px}
.fimg-dl:hover{background:rgba(12,14,11,.85)}
.fimg-box:hover .fimg-dl,.fimg-dl:focus-visible{opacity:1}
@media (hover:none){.fimg-dl{opacity:1}}
@media (hover:none){.fchip-act{opacity:1}}

/* jump to latest */
#to-bottom{
  position:absolute;left:50%;bottom:calc(100% + 4px);z-index:5;
  display:flex;align-items:center;gap:6px;
  height:32px;padding:0 var(--s3);border-radius:var(--rf);
  background:var(--surface-3);border:1px solid var(--border-2);
  box-shadow:var(--shadow-2);color:var(--text-2);
  font-size:var(--t-xs);font-weight:500;
  opacity:0;visibility:hidden;transform:translate(-50%,6px);
  transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease),visibility var(--d2);
}
#to-bottom.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
#to-bottom:hover{color:var(--text);border-color:var(--border-3)}
#to-bottom svg{width:13px;height:13px}


/* agent tool cards: command preview + approve buttons, auto log lines */
.agent-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s3);margin-top:var(--s2);display:flex;flex-direction:column;gap:var(--s2)}
.agent-cmd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-sm);background:rgba(0,0,0,.3);border-radius:var(--r2);padding:var(--s2) var(--s3);overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.agent-sub{font-size:var(--t-xs);color:var(--text-3)}
.agent-note{font-size:var(--t-xs);color:var(--text-3);margin-top:var(--s2)}
/* Composer */
#composer{position:relative;flex-shrink:0;padding-top:var(--s1);padding-bottom:calc(var(--s3) + var(--sa-bottom))}
.mode-badge{
  align-self:flex-start;
  display:flex;align-items:center;gap:var(--s2);
  margin:var(--s2) var(--s3) 0;
  padding:6px 12px;
  font-size:var(--t-xs);font-weight:700;
  color:var(--accent);background:var(--accent-wash);
  border:1px solid var(--accent);
  border-radius:999px;cursor:pointer;
  transition:transform .12s var(--ease),background .12s;
}
.mode-badge:hover{background:var(--accent-wash-2)}
.mode-badge:active{transform:scale(.96)}
.mode-badge[hidden]{display:none}
#ibox{
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--r5);
  box-shadow:var(--shadow-2);
  transition:border-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease);
}
#composer .wrap{position:relative}
.composer-glow{position:absolute;inset:-26px 0 -30px;pointer-events:none;z-index:0;overflow:hidden}
.composer-glow i{position:absolute;border-radius:50%;filter:blur(34px);opacity:.55}
.composer-glow .g1{width:230px;height:130px;inset-inline-start:-60px;top:-34px;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 65%,transparent),transparent)}
.composer-glow .g2{width:190px;height:110px;inset-inline-end:-30px;bottom:-30px;background:radial-gradient(closest-side,#6a7fb8 0%,transparent 70%);opacity:.4}
.composer-glow .g3{width:120px;height:120px;inset-inline-start:38%;bottom:-46px;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-2,#E08A5B) 55%,transparent),transparent);opacity:.35}
#ibox{position:relative;z-index:1;background:color-mix(in srgb,var(--surface) 74%,transparent);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35)}
#ibox:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 10px 44px -10px color-mix(in srgb,var(--accent) 45%,transparent)}
#ibox:focus-within{border-color:var(--accent-dim);box-shadow:var(--shadow-2),0 0 0 3px var(--accent-wash)}
#ibox.drag{border-color:var(--accent);box-shadow:var(--shadow-2),0 0 0 3px var(--accent-wash-2)}

#fprev{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s3) var(--s3) 0}
#fprev:empty{display:none}
.fpc{
  display:flex;align-items:center;gap:var(--s2);
  max-width:190px;padding:6px var(--s2) 6px var(--s3);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r2);
}
.fpc svg.fpc-ico{width:13px;height:13px;color:var(--accent);flex-shrink:0}
.fpc img{width:22px;height:22px;object-fit:cover;border-radius:var(--r1);flex-shrink:0}
.fpc-i{min-width:0;line-height:1.25}
.fpc-n{font-size:var(--t-xs);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpc-s{font-size:11px;color:var(--text-4);font-variant-numeric:tabular-nums}
.fpc-x{
  width:20px;height:20px;border-radius:var(--r1);flex-shrink:0;
  display:grid;place-items:center;color:var(--text-4);
  transition:background var(--d1),color var(--d1);
}
.fpc-x svg{width:11px;height:11px}
.fpc-x:hover{background:var(--danger-wash);color:var(--danger)}
.fpc.busy{opacity:.62}
.fpc.busy .fpc-s{color:var(--accent)}
.fpc-note{flex-basis:100%;margin:2px 0 0;font-size:11px;color:var(--text-4);line-height:1.45}

#pinput{
  display:block;width:100%;
  background:none;border:none;outline:none;resize:none;
  padding:var(--s4) var(--s4) var(--s2);
  font-size:var(--t-body);line-height:1.6;color:var(--text);
  max-height:184px;overflow-y:auto;text-align:start;
}
#pinput::placeholder{color:var(--text-3)}

.ibar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3)}
.tools{display:flex;align-items:center;gap:2px;min-width:0;flex:1}
.tool{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 var(--s2);border-radius:var(--r2);
  color:var(--text-3);font-size:var(--t-sm);font-weight:500;
  border:1px solid transparent;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease);
}
.tool svg{width:16px;height:16px}
.tool:hover{background:var(--surface-hover);color:var(--text)}
.tool:active{background:var(--surface-press)}
.tool[aria-pressed="true"]{background:var(--accent-wash-2);color:var(--accent);border-color:transparent}
.tool[aria-pressed="true"]:hover{background:var(--accent-wash-2)}
.tool.listening{background:var(--accent-wash-2);color:var(--accent);border-color:var(--accent);animation:micPulse 1.4s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px var(--accent-wash)}}
.tool-label{display:none}
.tool[aria-pressed="true"] .tool-label{display:inline}

.ibar-end{display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
#counter{
  font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity var(--d2);
}
#counter.show{opacity:1}
#counter.warn{color:var(--danger)}
#send-btn{
  width:38px;height:38px;border-radius:var(--r2);
  display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);
  transition:background var(--d1) var(--ease),transform var(--d1) var(--ease),opacity var(--d1),box-shadow var(--d1);
}
#send-btn:not(:disabled){box-shadow:0 4px 16px -6px var(--accent)}
#send-btn svg{width:17px;height:17px}
#send-btn:hover:not(:disabled){background:var(--accent-2)}
#send-btn:active:not(:disabled){transform:scale(.94)}
#send-btn:disabled{background:var(--surface-2);color:var(--text-4);cursor:not-allowed}
#stop-btn{
  width:34px;height:34px;border-radius:var(--r2);
  display:none;place-items:center;
  background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);
  transition:background var(--d1),border-color var(--d1);
}
#stop-btn.show{display:grid}
#stop-btn:hover{background:var(--surface-3);border-color:var(--border-3)}
#stop-btn svg{width:15px;height:15px}

#ifooter{
  padding-top:var(--s3);text-align:center;
  font-size:var(--t-xs);color:var(--text-3);
}
/* arrival pulse after the landing morph lands on the composer */
#ibox.land-arrive{animation:landArrive 1.3s ease-out}
@keyframes landArrive{0%{box-shadow:0 0 0 0 transparent}35%{box-shadow:var(--shadow-2),0 0 0 7px var(--accent-wash)}}

/* Modal */
.modal{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;
  padding:var(--s4);
  opacity:0;visibility:hidden;
  transition:opacity var(--d2) var(--ease),visibility var(--d2);
}
.modal.open{opacity:1;visibility:visible}
.modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-card{
  position:relative;z-index:1;
  width:min(560px,100%);max-height:min(640px,calc(100dvh - var(--s8)));
  display:flex;flex-direction:column;
  background:var(--surface-3);
  border:1px solid var(--border-2);
  border-radius:var(--r4);
  box-shadow:var(--shadow-3);
  overflow:hidden;
  transform:translateY(10px) scale(.985);
  transition:transform var(--d3) var(--ease);
}
.modal.open .modal-card{transform:none}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s5) var(--s4);flex-shrink:0;
}
.modal-head .brand-logo{width:26px;height:26px;border-radius:8px;flex:none}
#auth-title{display:flex;align-items:center;gap:10px}
.tabs{
  display:flex;gap:var(--s1);padding:0 var(--s5);flex-shrink:0;
  border-bottom:1px solid var(--border);
}
/* plans + coupons */
.plan-grid{display:grid;gap:10px;margin-top:12px}
.plan{border:1px solid var(--border-2);border-radius:var(--r2);padding:14px;background:var(--surface)}
.plan.cur{border-color:var(--accent)}
.plan h4{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.plan .plan-badge{font-size:11px;font-weight:800;color:var(--on-accent);background:var(--accent);border-radius:6px;padding:2px 8px}
.plan .plan-price{color:var(--accent);font-weight:800;font-size:14px;margin-top:2px}
.plan ul{margin:10px 0 0;padding:0;list-style:none;font-size:13px;color:var(--text-2);display:grid;gap:5px}
.plan .row{display:flex;gap:8px;margin-top:12px}
.plan .row .btn{flex:1}
.coupon-row{display:flex;gap:8px;margin-top:4px}
.coupon-row input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r2);height:36px;padding:0 var(--s3);color:var(--text);font-family:inherit;font-size:14px;outline:none}
.coupon-row input:focus{border-color:var(--accent)}
.pay-steps{margin:6px 0 12px;padding-inline-start:20px;display:grid;gap:6px;font-size:13.5px;color:var(--text-2);line-height:1.8}
.pay-steps b{color:var(--text)}
.plan{position:relative}
.plan.hot{border-color:var(--accent);box-shadow:0 6px 24px -10px var(--accent)}
.plan-tag{position:absolute;top:-11px;inset-inline-start:12px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:800;border-radius:6px;padding:2px 10px}
.plan .plan-price{font-family:"Aref Ruqaa","Tajawal",serif;font-size:24px}
.plan ul li{position:relative;padding-inline-start:20px}
.plan ul li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--accent);font-weight:800}
/* usage meters */
#usage-box{margin:10px 0 4px}
.use-card{border:1px solid var(--border-2);border-radius:var(--r2);padding:12px 14px;background:var(--surface)}
.use-card h5{margin:0 0 8px;font-size:13.5px;color:var(--text-2);font-weight:800}
.u-row{margin-bottom:8px}
.u-row:last-child{margin-bottom:0}
.u-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-2);margin-bottom:4px}
.u-top b{color:var(--text)}
.u-bar{height:6px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.u-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .4s}
.u-fill.hot{background:var(--danger)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex-shrink:0}
.tab{
  position:relative;height:38px;padding:0 var(--s3);
  color:var(--text-3);font-size:var(--t-ui);font-weight:500;
  transition:color var(--d1) var(--ease);
}
.tab:hover{color:var(--text-2)}
.tab[aria-selected="true"]{color:var(--text)}
.tab[aria-selected="true"]::after{
  content:'';position:absolute;left:var(--s2);right:var(--s2);bottom:-1px;height:2px;
  background:var(--accent);border-radius:var(--rf);
}
.tabpanel{padding:var(--s5);overflow-y:auto;flex:1;min-height:0}
.tabpanel[hidden]{display:none}
.plug-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s1);border-bottom:1px solid var(--border)}
.plug-row:last-child{border-bottom:none}
.plug-t{font-size:var(--t-sm);font-weight:600}
.plug-d{font-size:var(--t-xs);color:var(--text-3);margin-top:2px}
.switch{width:44px;height:26px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border-2);position:relative;flex-shrink:0;transition:background var(--d1) var(--ease)}
.switch i{position:absolute;top:2px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:var(--text-4);transition:all var(--d2) var(--ease)}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"] i{inset-inline-start:19px;background:#fff}
.set-h{font-size:var(--t-h3);font-weight:700;margin-bottom:var(--s1)}
.set-p{font-size:var(--t-sm);color:var(--text-3);line-height:1.6;margin-bottom:var(--s4)}
.set-block{margin-top:var(--s7);padding-top:var(--s7);border-top:1px solid var(--border)}
.stat-wide{margin-top:var(--s3)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:38px;padding:0 var(--s4);border-radius:var(--r2);border:1px solid transparent;font-size:var(--t-sm);font-weight:700;cursor:pointer;transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease),color var(--d1) var(--ease),transform var(--d1) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
.btn-quiet{background:var(--surface-2);border-color:var(--border);color:var(--text)}
.btn-quiet:hover{background:var(--surface-3);border-color:var(--border-2)}
.btn-accent{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.btn-accent:hover{filter:brightness(1.06)}
.btn-danger{background:var(--danger-wash);border-color:transparent;color:var(--danger)}
.btn-danger:hover{background:var(--danger);border-color:transparent;color:var(--on-accent)}
.btn-sm{height:30px;padding:0 var(--s3);font-size:var(--t-xs)}

/* segmented control */
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);border-radius:var(--r2);border:1px solid var(--border)}
.seg button{
  height:30px;padding:0 var(--s4);border-radius:var(--r1);
  font-size:var(--t-sm);font-weight:500;color:var(--text-3);
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease);
}
.seg button:hover{color:var(--text-2)}
.seg button[aria-checked="true"]{background:var(--surface-3);color:var(--text);box-shadow:var(--shadow-1)}

/* atmosphere tiles: each tile carries its own data-theme, so it paints its own sky */
.atmos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3);margin-top:var(--s4)}
.atmo{position:relative;height:124px;overflow:hidden;background:var(--shade,none),var(--photo) center/cover no-repeat,var(--sky,var(--canvas));border:1px solid var(--border-2);border-radius:var(--r3);color:var(--text);text-align:start;transition:border-color var(--d1) var(--ease),transform var(--d3) var(--ease),box-shadow var(--d3) var(--ease)}
.atmo::before{content:"";position:absolute;inset:0;background:var(--scene,none) var(--scene-x,50%) bottom/cover no-repeat}
.atmo::after{content:"";position:absolute;inset-inline:0;bottom:0;height:52%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));pointer-events:none}
.atmo span{position:absolute;inset-inline-start:var(--s3);bottom:var(--s2);z-index:1;font-family:"Aref Ruqaa","Tajawal",serif;font-size:17px;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.atmo:hover{border-color:var(--border-3);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.atmo[aria-checked="true"]{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.atmo[aria-checked="true"] span::after{content:" ✓";color:var(--accent);font-weight:800}

/* fact list */
.facts{display:flex;flex-direction:column;gap:var(--s2)}
.fact{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s3);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r2);
}
.fact-txt{flex:1;min-width:0;font-size:var(--t-sm);line-height:1.55;color:var(--text-2);overflow-wrap:anywhere}
.fact-x{
  width:24px;height:24px;border-radius:var(--r1);flex-shrink:0;
  display:grid;place-items:center;color:var(--text-4);
  transition:background var(--d1),color var(--d1);
}
.fact-x svg{width:12px;height:12px}
.fact-x:hover{background:var(--danger-wash);color:var(--danger)}

.empty{
  padding:var(--s7) var(--s5);text-align:center;
  border:1px dashed var(--border-2);border-radius:var(--r3);
}
.empty h4{font-size:var(--t-h3);font-weight:700;margin-bottom:var(--s1)}
.empty p{font-size:var(--t-sm);color:var(--text-3);line-height:1.6;max-width:36ch;margin:0 auto}

/* connection field */
.set-field{display:block;margin-top:var(--s4)}
.set-field span{display:block;font-size:var(--t-sm);font-weight:500;color:var(--text-2);margin-bottom:var(--s2)}
.set-field input{
  width:100%;height:38px;padding:0 var(--s3);
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r2);
  font-size:var(--t-sm);transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease);
}
.set-field input:focus{outline:none;border-color:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-wash)}

/* stat readouts */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.stat{padding:var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r3)}
.stat-v{font-family:var(--f-serif);font-size:1.75rem;font-weight:300;line-height:1;}
.stat-l{font-size:var(--t-xs);color:var(--text-3);margin-top:6px}
.meter{height:4px;border-radius:var(--rf);background:var(--surface-2);overflow:hidden;margin-top:var(--s3)}
.meter i{display:block;height:100%;background:var(--accent);border-radius:var(--rf);transition:width var(--d4) var(--ease)}

.io-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.io-txt{flex:1;min-width:200px}
.io-t{font-size:var(--t-sm);font-weight:500;color:var(--text)}
.io-d{margin-top:3px;font-size:var(--t-xs);color:var(--text-3);line-height:1.55;max-width:44ch}
.io-btns{display:flex;gap:var(--s2);flex-shrink:0}
.danger-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.danger-row p{font-size:var(--t-sm);color:var(--text-3);flex:1;min-width:180px}

/* Toast */
#toast-host{
  position:fixed;left:50%;bottom:calc(var(--s7) + var(--sa-bottom));z-index:200;
  transform:translateX(-50%);
  display:flex;flex-direction:column;gap:var(--s2);align-items:center;
  pointer-events:none;width:max-content;max-width:calc(100vw - var(--s8));
}
.toast{
  display:flex;align-items:center;gap:var(--s2);
  padding:10px var(--s4);
  background:var(--surface-3);color:var(--text);
  border:1px solid var(--border-2);border-radius:var(--rf);
  box-shadow:var(--shadow-3);
  font-size:var(--t-sm);font-weight:500;
  animation:toast-in var(--d3) var(--ease);
}
.toast svg{width:14px;height:14px;color:var(--accent)}
.toast.leaving{animation:toast-out var(--d2) var(--ease) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px) scale(.98)}}


/* packs tab: denser grid, clearer hierarchy, quieter buttons */
.plan-grid{display:grid;gap:12px;margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.plan{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.plan:hover{transform:translateY(-2px);border-color:var(--border-2);box-shadow:var(--shadow-2)}
.plan h4{font-family:"Aref Ruqaa","Tajawal",serif;font-size:20px;font-weight:700}
.plan .plan-price{margin-top:4px}
.plan .row{justify-content:flex-start}
.plan .row .btn{flex:0 1 auto;padding-inline:18px}
/* coupon box: dashed accent frame so the code step stands out */
.coupon-row{border:1.5px dashed var(--accent-dim);border-radius:var(--r3);padding:12px;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.coupon-row input{flex:1;min-height:44px;font-size:16px;letter-spacing:2px;text-align:center}
.pay-steps{margin:10px 0;color:var(--text-2);font-size:13.5px;display:grid;gap:6px;padding-inline-start:20px}
.pay-steps b{color:var(--text)}
/* Responsive */
@media (min-width:980px){
  #sb-toggle{display:inline-flex}
  #sidebar{position:relative;transform:none;width:var(--sidebar-w);transition:none;box-shadow:none;border-right:1px solid var(--border-2)}
  #sidebar.sb-hide{display:none}
  [dir="rtl"] #sidebar{position:relative;transform:none;border-right:none;border-left:1px solid var(--border-2)}
  #scrim{display:none}
  .only-mobile{display:none!important}
  #topbar{padding-inline:var(--s5)}
  #model-pop{inset-inline-end:var(--s5)}
  #new-chat-btn{height:32px;font-size:var(--t-xs);gap:var(--s1)}
}
@media (max-width:979px){
  .only-desktop{display:none!important}
  .only-mobile{display:inline-flex!important}
  #sidebar{visibility:hidden;transition:transform var(--d3) var(--ease),visibility 0s linear var(--d3)}
  #sidebar.open{visibility:visible;transition:transform var(--d3) var(--ease)}
  .tb-brand{display:flex}
  #tb-title{display:none}
  #view-switch{margin-inline-start:auto}
  .chat-item{height:44px}
  .chat-del{width:32px;height:32px}
  .sb-row{height:44px}
}
@media (max-width:620px){
  :root{--topbar-h:54px}
  .ibtn{width:44px;height:44px}
  .tool{height:42px;min-width:44px;justify-content:center}
  #send-btn,#stop-btn{width:42px;height:42px}
  .qchip{height:40px;min-height:40px;padding:0 var(--s4);font-size:14px}
  .cards{grid-template-columns:1fr;gap:var(--s3)}
  .card{padding:var(--s4) var(--s4);min-height:88px;display:flex;flex-direction:column;justify-content:center}
  .card-h{font-size:15px}
  .card-d{font-size:13px;line-height:1.5}
  .hero{padding:var(--s6) var(--s4) var(--s5)}
  .hero-title{font-size:clamp(1.75rem, 1.1rem + 4vw, 2.2rem);line-height:1.35;margin-bottom:var(--s4);}
  .hero-sub{font-size:15px;line-height:1.6;margin-bottom:var(--s4)}
  .hero-cta{flex-direction:column;gap:var(--s3)}
  .hero-cta .btn{width:100%;justify-content:center;height:46px;font-size:15px}
  .ubub{max-width:88%;font-size:15px;line-height:1.6}
  .mrow.assistant .wrap{gap:var(--s3)}
  .tool{padding:0 var(--s3)}
  .tool-label{display:none!important}
  #pinput{padding:var(--s3) var(--s3) var(--s2);font-size:16px;line-height:1.5}
  #ibox{margin:0 var(--s2) var(--s2);border-radius:var(--r5)}
  .stats{grid-template-columns:1fr}
  .modal{padding:0;place-items:end stretch}
  .modal-card{
    width:100%;max-height:92dvh;
    border-radius:var(--r6) var(--r6) 0 0;
    border-bottom:none;transform:translateY(16px);
  }
  .modal-head,.tabs{padding-inline:var(--s4)}
  .tabpanel{padding:var(--s4) var(--s4) calc(var(--s6) + var(--sa-bottom))}
  #toast-host{bottom:calc(var(--s9) + var(--sa-bottom))}
}
@media (max-width:400px){
  #model-label-m{display:none}
  .status-chip{padding-inline:10px;font-size:11px}
  .qchip{font-size:13px;height:38px}
  .hero-title{font-size:clamp(1.5rem, 1rem + 5vw, 1.9rem)}
  .hero{padding:var(--s5) var(--s3)}
  .card{padding:var(--s3) var(--s3)}
}
@media (min-width:1600px){
  :root{--measure:48rem}
}

/* Motion preferences */
/* nabd pulse mark (driven by real app state) */
#call-char .n-dot,#call-char .n-bowl{transform-box:fill-box;transform-origin:center}
#call-char[data-state="speaking"] .n-dot{animation:hop .7s ease-in-out infinite}
#call-char[data-state="thinking"] .n-bowl,#call-char[data-state="listening"] .n-bowl{animation:fade-b 1.4s ease-in-out infinite}
@keyframes fade-b{50%{opacity:.35}}
#cam-video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r3);border:1px solid var(--border);background:var(--surface-2);display:block}
.cam-actions{display:flex;gap:var(--s2);margin-top:var(--s3)}
.cam-actions .btn{flex:1}
/* Live call page */
#call-modal{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;
  background:linear-gradient(180deg,rgba(12,12,10,.97),rgba(12,12,10,.995)),var(--canvas);
  padding:calc(var(--sa-top) + var(--s4)) var(--s4) calc(var(--sa-bottom) + var(--s6))}
#call-modal.open{display:flex}
.call-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.call-id{display:flex;flex-direction:column;gap:2px}
.call-name{font-size:var(--t-h2);font-weight:700}
.call-status{font-size:var(--t-sm);color:var(--text-3);display:flex;align-items:center;gap:6px}
.call-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.call-timer{font-size:var(--t-sm);color:var(--text-3);font-variant-numeric:tabular-nums}
.call-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);position:relative;min-height:0}
#call-char{width:min(240px,62vw);aspect-ratio:1;background:none;border:0;
  display:grid;place-items:center;position:relative;
}
#call-char canvas{width:100%;height:100%;display:block}
#call-char[data-state="error"]{color:var(--danger);border-color:var(--danger)}
.call-lines{display:flex;flex-direction:column;gap:var(--s2);width:100%;max-width:34rem}
.call-line{background:var(--surface-2);border:1px solid var(--border-2);border-radius:8px;padding:var(--s2) var(--s3);min-height:3.4em;text-align:start}
.call-line .call-who{display:block;font-size:var(--t-xs);font-weight:700;color:var(--accent);margin-bottom:2px}
.call-line p{margin:0;font-size:var(--t-sm);color:var(--text);line-height:1.7;min-height:1.5em}
.call-line.you{border-inline-start:3px solid var(--accent)}

.auth-body{padding:var(--s2) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.auth-body .tabs{margin-bottom:var(--s1)}
.fld-t{font-size:var(--t-xs);font-weight:700;color:var(--text-3)}
.auth-err{margin:0;font-size:var(--t-sm);color:#e5484d}
#auth-go{width:100%;margin-top:var(--s1)}
#auth-go[disabled]{opacity:.6;pointer-events:none}
.btn.google{width:100%;background:var(--surface-2);border-color:var(--border-2)}
.google-g{width:18px;height:18px;flex-shrink:0}
.avatar-btn{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;display:grid;place-items:center;background:var(--surface-2);border:1.5px solid var(--border-3);color:var(--text);font-weight:800;font-size:15px;cursor:pointer;padding:0;transition:border-color var(--d1) var(--ease),transform var(--d1) var(--ease)}
.avatar-btn:hover{border-color:var(--accent);transform:scale(1.05)}
.avatar-btn img{width:100%;height:100%;object-fit:cover}
.prof-top{display:flex;align-items:center;gap:var(--s3)}
#prof-pic{position:relative;width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);font-size:28px;font-weight:800;cursor:pointer;padding:0}
#prof-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prof-cam{position:absolute;bottom:0;inset-inline:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;padding:3px}
.prof-cam svg{width:16px;height:16px}
.prof-id{min-width:0;overflow:hidden}
.prof-nickrow{display:flex;gap:var(--s2)}
.prof-nickrow .field{flex:1;min-width:0}
#prof-logout{width:100%}
.avatar-fallback{font-size:88px;line-height:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}
#settings.open,#profile-modal.open{padding:0;place-items:stretch}
#settings.open .modal-card,#profile-modal.open .modal-card{width:100%;max-height:none;height:100dvh;border-radius:0;border-left:none;border-right:none}
#settings.open .modal-scrim,#profile-modal.open .modal-scrim{display:none}
.prov-tag{font-size:var(--t-xs);color:var(--text-4);margin-top:4px}
.pop-models-h{font-size:var(--t-xs);font-weight:700;color:var(--text-3);padding:var(--s3) var(--s3) var(--s1)}
.pop-models{display:flex;flex-direction:column;gap:4px;padding:0 var(--s2)}
.pop-model{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:start;padding:7px 10px;border-radius:8px;border:1px solid transparent;background:none;cursor:pointer;color:var(--text);width:100%;position:relative}
.pop-model:hover{background:var(--surface-2)}
.pop-model.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pop-model.locked{opacity:.55}
.model-dot{position:absolute;inset-inline-end:10px;top:50%;translate:0 -50%;width:8px;height:8px;border-radius:50%;background:var(--text-4)}
.pop-model:not(.locked) .model-dot{background:#4ade80;box-shadow:0 0 7px #4ade80}
.pop-model:hover{background:var(--surface-2)}
.pop-model.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pm-name{font-size:var(--t-sm);font-weight:700}
.pm-desc{font-size:var(--t-xs);color:var(--text-3)}
.tool.model-tool{width:auto;padding:0 10px;gap:4px;font-size:var(--t-xs);font-weight:700;color:var(--text-2)}
.tool.model-tool svg{width:14px;height:14px}
#model-chip-name{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#model-menu .pop-model{width:100%}
#model-menu{max-height:min(44dvh,360px);overflow-y:auto;overscroll-behavior:contain}
/* unstable lane nests in its own dashed box inside the menu */
.unstable-box{border:1px dashed var(--border-2);border-radius:var(--r2);padding:6px 6px 8px;margin-top:8px;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.unstable-box .pop-models-h{padding-top:2px}
#model-menu .pop-model{padding:5px 10px}
#model-menu .pm-name{font-size:13px}
#model-menu .pm-desc{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-models{max-height:38dvh;overflow-y:auto;overscroll-behavior:contain}
#call-caption.call-hint{min-height:1.4em;margin:0;text-align:center;font-size:var(--t-xs);color:var(--text-3)}
.call-controls{display:flex;align-items:flex-start;justify-content:center;gap:var(--s6)}
.call-ctl{display:flex;flex-direction:column;align-items:center;gap:6px}
.call-ctl>span{font-size:11px;color:var(--text-3)}
.call-ctl button{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);
  transition:transform var(--d1) var(--ease),opacity var(--d1) var(--ease),background var(--d1) var(--ease)}
.call-ctl button:active{transform:scale(.93)}
.call-ctl button svg{width:24px;height:24px}
#call-end{background:#b34434;border-color:transparent;color:#fff}
#call-send{background:var(--accent);border-color:transparent;color:#fff}
#call-mic[aria-pressed="false"]{opacity:.45}
.call-hint{text-align:center;font-size:11px;color:var(--text-4);margin-top:var(--s3)}
@media print{
  #sidebar,#topbar,#composer,#toast-host,.modal,#call-modal,#to-bottom,.mact,.ch-acts,.fprev,#fprev,.ibar,.call-controls,.runout{display:none!important}
  #app{display:block;height:auto}
  #main{margin:0}
  #messages{overflow:visible;height:auto}
  body{background:#fff;color:#000}
  .aic{color:#000;background:none;border:none;box-shadow:none}
  .ubub{background:#f2f2f2;color:#000;border-color:#ccc}
  .aic pre{background:#f5f5f5;border-color:#ccc}
  .aic pre code{color:#000}
  .aic a{color:#000}
  .mrow{padding:8px 0}
}
#ibox{position:relative}
.plus-menu{position:absolute;bottom:calc(100% + 8px);inset-inline-start:12px;width:min(300px,calc(100% - 24px));background:var(--surface-3);border:1px solid var(--border-2);border-radius:var(--r4);box-shadow:var(--shadow-3);padding:var(--s2);z-index:30}
.plus-menu[hidden]{display:none}
.plus-menu.opening{animation:plus-in .18s var(--ease)}
@keyframes plus-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.plus-menu .plug-row{width:100%;border:none;border-radius:var(--r2);padding:var(--s2) var(--s3);display:flex;align-items:center;gap:var(--s3);text-align:start;cursor:pointer;background:none}
.plus-menu .plug-row:hover{background:var(--surface-hover)}
.plus-menu .plug-row>span:nth-child(2){flex:1;min-width:0}
.plus-menu .plug-row svg{width:18px;height:18px;flex-shrink:0;color:var(--text-3)}
.plus-dot{width:8px;height:8px;border-radius:50%;background:var(--text-4);flex-shrink:0;transition:background var(--d1) var(--ease),box-shadow var(--d1) var(--ease)}
.plug-row[aria-checked="true"] .plus-dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-wash-2)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .skeleton::after{display:none}
  #call-char,#call-char *{animation:none!important}
}

/* + menu as capability cards (2-col grid, tinted tiles, clear on-state) */
#plus-menu{
  width:min(340px,calc(100% - 24px));
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:10px;border-radius:12px;background:var(--surface-2);
}
#plus-menu [data-plug="search"]{--plug-c:#3b82f6}
#plus-menu [data-plug="image"]{--plug-c:#a855f7}
#plus-menu [data-plug="files"]{--plug-c:#22c55e}
#plus-menu [data-plug="thinking"]{--plug-c:#f59e0b}
#plus-menu [data-plug="video"]{--plug-c:#ef4444}
#plus-menu .plug-row{
  position:relative;flex-direction:column;align-items:flex-start;gap:8px;
  padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);
  transition:transform .15s var(--ease),border-color .15s,background .15s;
}
#plus-menu .plug-row:hover{background:var(--surface-3);transform:translateY(-2px)}
#plus-menu .plug-row>svg{width:34px;height:34px;padding:7px;border-radius:9px;background:var(--plug-c,var(--surface-3));color:#fff;flex-shrink:0}
#plus-menu .plug-row>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#plus-menu .plug-t{font-weight:700;font-size:.85rem;color:var(--text)}
#plus-menu .plug-d{font-size:.72rem;color:var(--text-3);line-height:1.5}
#plus-menu .plus-dot{position:absolute;top:10px;inset-inline-end:10px}
#plus-menu .plug-row[aria-checked="true"]{border-color:var(--accent);background:var(--accent-wash)}

/* ---------- 25. nabd identity ----------
   Six atmospheres, each an illustrated scene (sky + layered landscape) drawn
   as inline SVG, so nothing is fetched and nothing can fail to load. The logo
   is the word itself; the only motif is the dot of the ن, which hops while
   nabd thinks. */

/* status: silent when ready; only shows while busy or failed */
.dot{width:7px;height:7px;border-radius:50%;background:var(--text-3);-webkit-mask:none;mask:none}
#model-btn[data-state="ready"]{display:none}
[data-state="busy"] .dot{background:var(--accent);animation:blink 1s ease-in-out infinite}
[data-state="error"] .dot{background:var(--danger)}
@keyframes blink{50%{opacity:.25}}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.status-chip{border:0;background:none;padding:0 var(--s2);color:var(--text-3)}
.status-chip:hover,.status-chip[aria-expanded="true"]{background:var(--surface-hover);color:var(--text)}
.tdots i{display:none}
.tdots::before{content:"";display:block;width:8px;height:8px;margin:8px 4px 2px;border-radius:50%;background:var(--accent);animation:hop .7s ease-in-out infinite}

/* frame */
#topbar{background:color-mix(in srgb,var(--canvas) 82%,transparent)}
#tb-title{font-weight:700;color:var(--text)}
.brand-mark{border-radius:var(--r2)}
#sidebar{box-shadow:none}
.chat-item{border-radius:0}
.chat-item.active{background:none;font-weight:700}
.chat-item.active::before{height:100%;width:2px;border-radius:0}
.chat-item:hover{background:var(--surface-hover)}
.sb-row,.tab{border-radius:0}
.btn,.field,.status-chip,.toast,#to-bottom{border-radius:var(--r2)}
.aic pre{border-radius:var(--r3)}
#call-modal{background:var(--canvas)}
.modal-scrim{background:rgba(0,0,0,.6)}

@media (min-width:980px){#sidebar{background:color-mix(in srgb,var(--sidebar) 84%,transparent)}}

/* welcome */
#welcome .wrap{display:flex;flex-direction:column;align-items:stretch;text-align:start}
.hello{font-size:var(--t-h2);font-weight:500;color:var(--text-3);margin-bottom:var(--s2)}
.wordmark{display:flex;align-items:center;gap:.12em;font-size:clamp(5.5rem,17vw,10.5rem);font-weight:800;line-height:1.05;color:var(--text)}
.starts{margin-top:var(--s7);border-top:1px solid var(--border-2)}
.starts li{border-bottom:1px solid var(--border)}
.starts .qchip{display:block;width:100%;height:auto;min-height:0;padding:var(--s4) 0;border:0;border-radius:0;background:none;color:var(--text-2);font-size:1.0625rem;font-weight:500;text-align:start}
.starts .qchip:hover{background:none;color:var(--accent);border:0}

/* transcript: no bubbles, no avatar, no answer card */
.avatar{display:none}
.mrow{padding-block:var(--s6)}
.mrow + .mrow{padding-top:var(--s6);border-top:1px solid var(--border)}
.mrow.user .wrap{justify-content:flex-start}
.ubub{max-width:none;padding:0;border:0;border-radius:0;background:none;font-size:1.125rem;font-weight:700;line-height:1.7;color:var(--text)}
.mrow.assistant .wrap{gap:0}
.acol{padding-inline-start:var(--s4);border-inline-start:1px solid var(--border-2)}
.streaming .acol{border-inline-start-color:var(--accent)}
.aic{padding:0;border:0;border-radius:0;background:none;font-size:1rem;line-height:1.9}
@media (max-width:620px){.ubub{max-width:none;font-size:1.0625rem}}

/* composer: a flat bar, not a floating card */
#composer{padding-top:0;border-top:1px solid var(--border-2);background:color-mix(in srgb,var(--canvas) 84%,transparent)}
#composer::before{display:none}
#composer .wrap{padding-block:var(--s3) var(--s2)}
#ibox{background:var(--surface);border:1px solid var(--border-3);box-shadow:none}
#ibox:focus-within{border-color:var(--accent);box-shadow:none}
#ibox.drag{border-color:var(--accent);box-shadow:none}
#ifooter{padding-top:var(--s2);text-align:start;color:var(--text-4)}
@media (max-width:620px){#ibox{margin:0}}
/* finishing touches: warmth, a little imperfection */
html::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.hello{font-family:"Aref Ruqaa","Tajawal",serif;font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);display:inline-block;padding-bottom:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M2 5c9-5 15 3 24-1s14-3 22 0 15 3 24-1 16 0 26 1' fill='none' stroke='%23E08A5B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right bottom/96px 8px}
.wordmark{font-family:"Aref Ruqaa","Tajawal",serif;font-weight:700}
.brand-word b{font-family:"Aref Ruqaa","Tajawal",serif}
.starts li{transition:transform var(--d3) var(--ease)}
.starts li:hover{transform:translateX(-4px)}
:where(button):active{transform:translateY(1px)}
textarea,input{caret-color:var(--accent)}
@keyframes settle{from{opacity:0;transform:translateY(10px)}}
#welcome .wrap>*{animation:settle .55s var(--ease) both}
#welcome .wrap>*:nth-child(2){animation-delay:.08s}
#welcome .wrap>*:nth-child(3){animation-delay:.16s}
@media (prefers-reduced-motion:reduce){#welcome .wrap>*{animation:none}}
/* on phones the crop lands on the camels; slide it left so the pyramids show */
@media (max-width:700px){[data-theme="dunes"]{--scene-x:7%}}
/* boxy composer: chunky border, hard offset shadow that lifts when you type */
#composer{border-top:2px dashed var(--border-3);background:color-mix(in srgb,var(--canvas) 92%,transparent)}
#composer .wrap{padding-block:var(--s4) var(--s2)}
#ibox{background:var(--surface);border:2px solid var(--text-3);border-radius:var(--r2);box-shadow:5px 5px 0 var(--accent-dim);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
#ibox:focus-within{border-color:var(--accent);box-shadow:8px 8px 0 var(--accent);transform:translate(-3px,-3px)}
#ibox.drag{border-color:var(--accent);box-shadow:8px 8px 0 var(--accent);transform:translate(-3px,-3px) rotate(-.4deg)}
#ibox .ibar{border-top:2px dashed var(--border-2);background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
#pinput{padding:var(--s4) var(--s4) var(--s3)}
.tool{border:2px solid transparent;border-radius:var(--r2)}
.tool:hover{border-color:var(--border-3);background:var(--surface-hover)}
.tool[aria-pressed="true"]{border-color:var(--accent)}
#send-btn{border:2px solid var(--text);border-radius:var(--r2);box-shadow:3px 3px 0 var(--text);transition:transform .12s,box-shadow .12s,background .15s}
#send-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--text)}
#send-btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 var(--text)}
#send-btn:disabled{box-shadow:none;border-color:var(--border-2)}
#ifooter{padding-top:var(--s3);font-size:11px;letter-spacing:.02em}
#ifooter::before{content:"\270E ";color:var(--accent)}

.composer-glow{display:none}

/* hand-drawn pointer */
html,body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3l1.6 19.2 4.5-4.6 3.5 7.3 3.2-1.5-3.4-7.1 6.5-.4z' fill='%23f4e4cc' stroke='%232a1a14' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,auto}
a,button,[role=button],[role=switch],.chat-item,.qchip,.tool,.atmo,label,summary,select{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3l1.6 19.2 4.5-4.6 3.5 7.3 3.2-1.5-3.4-7.1 6.5-.4z' fill='%23e08a5b' stroke='%232a1a14' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,pointer!important}
button:disabled{cursor:not-allowed!important}
#cur-ring{position:fixed;left:0;top:0;width:32px;height:32px;border:2px solid var(--accent);border-radius:52% 48% 55% 45%/48% 55% 45% 52%;
  pointer-events:none;z-index:99999;opacity:.75;transition:scale .22s var(--ease),background .2s;animation:spin 7s linear infinite}
#cur-ring.on{scale:1.7;background:color-mix(in srgb,var(--accent) 16%,transparent)}
#cur-ring.down{scale:.65}
.cur-spark{position:fixed;width:10px;height:2.5px;background:var(--accent);border-radius:2px;pointer-events:none;z-index:99999;transform-origin:0 50%}
@keyframes spin{to{rotate:360deg}}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes slidein{from{opacity:0;transform:translateX(18px)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.94)}}
@keyframes bobup{50%{transform:translateY(-2px)}}
@keyframes floaty{50%{transform:translateY(-6px) rotate(-.6deg)}}
@keyframes wiggle{20%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}80%{transform:rotate(-5deg)}}
@keyframes breathe{50%{opacity:.55}}
@keyframes bgbreath{to{transform:scale(1.04) translateY(-8px)}}
@keyframes filmgrain{0%{translate:0 0}25%{translate:-3px 2px}50%{translate:2px -3px}75%{translate:-2px -1px}}
@media (prefers-reduced-motion:no-preference){
  #messages>*{animation:rise .5s var(--ease) both}
  #messages>*:nth-last-child(n+6){animation:none}
  .chat-item{animation:slidein .45s var(--ease) both}
  .chat-item:nth-child(2){animation-delay:.05s}.chat-item:nth-child(3){animation-delay:.1s}.chat-item:nth-child(4){animation-delay:.15s}
  .chat-item:nth-child(5){animation-delay:.2s}.chat-item:nth-child(6){animation-delay:.25s}.chat-item:nth-child(n+7){animation-delay:.3s}
  #composer{animation:rise .7s .25s var(--ease) both}
  #welcome .wrap>.wordmark{animation:settle .55s .08s both,floaty 6s 1s ease-in-out infinite}
  .starts li{animation:slidein .5s var(--ease) both}
  .starts li:nth-child(2){animation-delay:.28s}.starts li:nth-child(3){animation-delay:.36s}.starts li:nth-child(4){animation-delay:.44s}
  .qchip:hover svg,.tool:hover svg{animation:wiggle .5s}
  #send-btn:not(:disabled) svg{animation:bobup 1.6s ease-in-out infinite}
  #pinput::placeholder{animation:breathe 2.6s ease-in-out infinite}
  .plus-menu:not([hidden]),#model-menu:not([hidden]){animation:pop .22s var(--ease)}
  .atmo{transition:transform .25s var(--ease)}.atmo:hover{transform:translateY(-4px) rotate(-1deg)}
  #to-bottom:hover{animation:bobup .6s ease-in-out infinite}
  body::after{animation:bgbreath 22s ease-in-out infinite alternate}
  html::after{animation:filmgrain .9s steps(1) infinite}
}

/* clean text box: no slab underneath, just a firm border that turns accent on focus */
#ibox,#ibox:focus-within,#ibox.drag{box-shadow:none;transform:none}
#ibox{border-color:var(--border-3)}
#ibox:focus-within,#ibox.drag{border-color:var(--accent)}
#send-btn,#send-btn:hover:not(:disabled),#send-btn:active:not(:disabled){box-shadow:none;border-color:transparent}
#send-btn:active:not(:disabled){transform:scale(.94)}
#send-btn:disabled{border-color:transparent}
#ifooter::before{content:none}

/* sidebar: clean paper, a solid primary button, tagged chat rows */
#sidebar{background:var(--sidebar)}
.brand-word b{font-size:2.3rem}
.brand-word i::after{content:"";display:inline-block;width:6px;height:6px;margin-inline-start:6px;border-radius:50%;background:var(--accent);vertical-align:middle}
#new-chat-btn{background:var(--accent);color:var(--on-accent);border:2px solid transparent;font-weight:700;justify-content:center;
  transition:transform .15s var(--ease),background .15s}
#new-chat-btn svg{color:var(--on-accent)}
#new-chat-btn:hover{background:var(--accent-2);border-color:transparent;transform:translateY(-2px)}
#new-chat-btn:active{transform:translateY(1px)}
.field{border:2px solid var(--border-3);border-radius:var(--r2);background:var(--surface)}
.field:focus-within{border-color:var(--accent)}
.chat-item{border-inline-start:3px solid transparent;transition:background .15s,border-color .15s,transform .15s var(--ease)}
.chat-item:hover{border-inline-start-color:var(--border-3);transform:translateX(-3px)}
.chat-item.active{background:var(--accent-wash);border-inline-start-color:var(--accent);font-weight:700}
.chat-item.active::before{display:none}
.sb-bottom{border-top:2px dashed var(--border-2)}
.sb-row{transition:background .15s,transform .15s var(--ease)}.sb-row:hover{transform:translateX(-3px)}

/* call page */
#call-modal{background:radial-gradient(ellipse 80% 55% at 50% 30%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 70%),
  radial-gradient(color-mix(in srgb,var(--text) 7%,transparent) 1px,transparent 1.3px) 0 0/18px 18px,var(--canvas)}
.call-name{font-family:"Aref Ruqaa","Tajawal",serif;font-size:2rem}
.call-status{align-self:flex-start;padding:3px 12px;border:2px solid var(--border-3);border-radius:var(--rf);background:var(--surface)}
.call-timer{padding:4px 12px;border:2px solid var(--border-3);border-radius:var(--r2);background:var(--surface);font-weight:700;letter-spacing:.06em}
#call-char{position:relative;width:min(280px,66vw)}
#call-char::before{content:"";position:absolute;inset:-4%;border:2px dashed var(--accent);border-radius:50%;opacity:.4;pointer-events:none}
#call-char::after{content:"";position:absolute;inset:8%;border:2px solid var(--accent);border-radius:50%;opacity:0;pointer-events:none}
.call-line{background:var(--surface);border:2px solid var(--border-3);border-radius:var(--r2)}
.call-line.ai{border-inline-start:4px solid var(--text-3)}
.call-line.you{border-inline-start-width:4px}
.call-ctl button{width:64px;height:64px;border-radius:var(--r3);border:2px solid var(--border-3);transition:transform .15s var(--ease),background .15s}
.call-ctl button:hover{transform:translateY(-4px)}
.call-ctl button:active{transform:scale(.93)}
#call-end,#call-send{border-color:transparent}
@keyframes ripple{from{opacity:.7;transform:scale(.9)}to{opacity:0;transform:scale(1.28)}}
@keyframes callin{from{opacity:0;transform:scale(1.03)}}
@keyframes blink{50%{opacity:.25}}
@media (prefers-reduced-motion:no-preference){
  #call-modal.open{animation:callin .35s var(--ease)}
  #call-char::before{animation:spin 40s linear infinite}
  #call-char[data-state="speaking"]::after,#call-char[data-state="listening"]::after{animation:ripple 1.5s ease-out infinite}
  .call-status::before{animation:blink 1.6s ease-in-out infinite}
  .call-line{animation:rise .4s var(--ease) both}
  .brand-word i::after{animation:beat 1.4s ease-in-out infinite}
}
@keyframes beat{0%,60%,100%{transform:scale(1)}15%{transform:scale(1.7)}30%{transform:scale(1)}40%{transform:scale(1.4)}}

/* composer, take three: a pen-drawn box with a folder tab */
#composer{border-top:0;background:linear-gradient(to top,var(--canvas) 74%,transparent)}
#composer .wrap{padding-block:var(--s3) var(--s2)}
#ibox,#ibox:focus-within,#ibox.drag{position:relative;border:0;background:var(--surface);border-radius:var(--r2)}
#ibox::before,#ibox::after{content:"";position:absolute;inset:0;border:2px solid var(--text-3);border-radius:var(--r2);pointer-events:none;transition:border-color .2s,opacity .2s}
#ibox::after{inset:-2px 1px -1px -1px;border-width:1px;opacity:.28;transform:rotate(-.15deg)}
#ibox:focus-within::before,#ibox:focus-within::after,#ibox.drag::before,#ibox.drag::after{border-color:var(--accent)}
#ibox:focus-within::after{opacity:.65}
#ibox .ibar{border-top:0;background:none;padding-top:0}
#pinput{font-size:1.05rem;min-height:3.2em;padding:var(--s4) var(--s4) var(--s2)}
#send-btn{width:42px;height:42px;border-radius:var(--r2)}

/* sidebar, drawn with a pen: every line and block goes through the wobble filter */
#sidebar,[dir="rtl"] #sidebar{border:0;box-shadow:0 0 32px rgba(0,0,0,.28)}
#sidebar::before{content:"";position:absolute;top:0;bottom:0;inset-inline-end:0;width:24px;border-inline-end:2px solid var(--border-3);filter:var(--hand-filter);pointer-events:none}
#new-chat-btn,#new-chat-btn:hover{position:relative;isolation:isolate;background:none;border-color:transparent}
#new-chat-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);border-radius:var(--r2);filter:var(--hand-filter);transition:background .15s}
#new-chat-btn:hover::before{background:var(--accent-2)}
#sidebar .field{position:relative;isolation:isolate;border:0;background:none}
#sidebar .field::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--surface);border:2px solid var(--border-3);border-radius:var(--r2);filter:var(--hand-filter);transition:border-color .2s}
#sidebar .field:focus-within::before{border-color:var(--accent)}
.chat-item{isolation:isolate;border-inline-start:0}
.chat-item:hover,.chat-item.active{background:none}
.chat-item.active::before{display:block;content:"";position:absolute;inset-inline:-4px;top:1px;bottom:1px;width:auto;height:auto;z-index:-1;
  background:var(--accent-wash-2);border-radius:var(--r2);transform:rotate(-.6deg);filter:var(--hand-filter)}
.chat-item:hover:not(.active)::before{content:"";position:absolute;inset-inline:-4px;top:1px;bottom:1px;z-index:-1;background:var(--surface-hover);border-radius:var(--r2);filter:var(--hand-filter)}
.sb-bottom{border-top:2px dashed var(--border-2);position:relative}
.sb-bottom::before{content:none}
.sb-empty strong{font-family:"Aref Ruqaa","Tajawal",serif;font-size:1.25rem;color:var(--text)}

/* the boxes themselves: uneven corners and pen-pressure borders */
#new-chat-btn::before,#sidebar .field::before,.chat-item.active::before,.chat-item:hover:not(.active)::before{border-radius:16px 4px 14px 5px/5px 14px 4px 16px}
#sidebar .field::before{border-width:2px 2.6px 1.8px 2.3px}
#new-chat-btn,.sb-row,.sb-empty p,#sidebar .field input{font-family:"Aref Ruqaa","Tajawal",serif}
#new-chat-btn{font-size:1.05rem}
.sb-row{font-size:1rem}

/* sidebar section titles get a small diamond ornament */
.sb-todos-head span,.sb-head{display:flex;align-items:center;gap:var(--s2)}
.sb-todos-head span::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--accent-dim);border-radius:1.5px;flex-shrink:0}
/* empty history: dashed invitation instead of flat text */
.sb-empty{border:1.5px dashed var(--border-2);border-radius:var(--r3);padding:var(--s5) var(--s4);text-align:center;color:var(--text-3)}
.sb-empty strong{display:block;color:var(--text-2);margin-bottom:var(--s1)}

/* ruqaa voice almost everywhere: headings, buttons, chips, labels, prices.
   body copy, tiny muted text and code stay tajawal/mono for readability. */
h1,h2,h3,h4,.set-h,.hello,#greeting,.plan h4,.plan .plan-price,.atmo span,.brand-word b,.wordmark,.land-big-cta,.btn,.qchip,.tab,.toast,.sb-todos-head,.model-name,.use-today,.agent-cmd{font-family:var(--f-display)}

/* settings headers: line — diamond — line */
.set-h{display:flex;align-items:center;gap:var(--s2)}
.set-h::before{content:"";flex:0 0 18px;height:1px;background:var(--accent-dim);opacity:.7}
.set-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--accent-dim),transparent);opacity:.5}
[dir="rtl"] .set-h::after{background:linear-gradient(-90deg,var(--accent-dim),transparent)}
/* plan cards: tiny star in the corner */
.plan{position:relative;overflow:hidden}
.plan::before{content:"✦";position:absolute;top:6px;inset-inline-end:10px;font-size:13px;color:var(--accent-dim);opacity:.45;pointer-events:none}
/* empty states + splash tagline ornaments */
.sb-empty::before{content:"✦ ✦ ✦";display:block;letter-spacing:6px;font-size:13px;color:var(--accent-dim);opacity:.8;margin-bottom:var(--s2)}
.sp-orn{font-size:12px;letter-spacing:8px;color:var(--accent-dim);opacity:.85;animation:spUp .6s .36s ease both;padding-inline-start:8px}

/* Work — split builder (code+simulator | chat) + floating Chat/Work switch */

/* segmented Chat/Work switch, floating inside the top bar */
#view-switch{
  flex-shrink:0;display:flex;gap:2px;padding:3px;border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border-2);box-shadow:var(--shadow-2);
}
#view-switch button{
  border:0;background:transparent;color:var(--text-3);
  font:inherit;font-size:var(--t-xs);font-weight:700;
  padding:6px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background var(--d2) var(--ease),color var(--d2) var(--ease),transform var(--d1) var(--ease);
}
#view-switch button:hover{color:var(--text-2)}
#view-switch button:active{transform:scale(.94)}
#view-switch button.on{background:var(--accent-wash-2);color:var(--accent)}
#view-switch button{
  border:0;background:transparent;color:var(--text-3);
  font:inherit;font-size:var(--t-xs);font-weight:700;
  padding:6px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background var(--d2) var(--ease),color var(--d2) var(--ease),transform var(--d1) var(--ease);
}
#view-switch button:hover{color:var(--text-2)}
#view-switch button:active{transform:scale(.94)}
#view-switch button.on{background:var(--accent-wash-2);color:var(--accent)}
@media (max-width:560px){
  #view-switch button{padding:4px 10px}
  #tb-title{padding:0}
}

/* views: only one visible at a time */
#work,#study{display:none;flex:1;min-height:0;overflow-y:auto;padding:calc(var(--topbar-h,58px) + 16px) var(--gutter) var(--s8)}
#work.split{overflow:hidden;padding-bottom:var(--s4)}
#main[data-view="work"] #messages,
#main[data-view="work"] #composer,
#main[data-view="study"] #messages,
#main[data-view="study"] #composer{display:none!important}
#main[data-view="work"] #work{display:block}
#main[data-view="study"] #study{display:block}

/* smooth crossfade on every switch */
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#main[data-view="work"] #work{animation:viewIn .28s var(--ease)}
#main[data-view="study"] #study{animation:viewIn .28s var(--ease)}
#main[data-view="chat"] #messages{animation:viewIn .28s var(--ease)}
@media (prefers-reduced-motion:reduce){
  #main[data-view="work"] #work,#main[data-view="study"] #study,#main[data-view="chat"] #messages{animation:none}
}

/* work layout */
.work-wrap{max-width:var(--measure);margin:0 auto;display:flex;flex-direction:column;gap:var(--s5)}
#work.split .work-wrap{max-width:none;height:100%}
.work-hero{display:flex;flex-direction:column;gap:var(--s3);text-align:center;padding-top:var(--s6)}
.work-hero h2{font-size:var(--t-display);line-height:1.2;margin:0}
.work-hero>p{margin:0;color:var(--text-2)}
.work-box{
  text-align:start;background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r5);box-shadow:var(--shadow-2);overflow:hidden;
}
.work-box:focus-within{border-color:var(--accent)}
#work-input,#study-input{
  width:100%;border:0;background:transparent;color:var(--text);
  font:inherit;font-size:var(--t-body);line-height:1.7;resize:vertical;min-height:56px;
  padding:var(--s3) var(--s4);
}
#work-input:focus,#study-input:focus{outline:none}
.work-bar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3) var(--s3)}
#work-attach,#study-attach{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);
  background:transparent;color:var(--text-2);font:inherit;font-size:var(--t-sm);font-weight:700;
  padding:8px 14px;border-radius:var(--r3);cursor:pointer;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease);
}
#work-attach:hover,#study-attach:hover{background:var(--surface-2);color:var(--text)}
#work-attach svg,#study-attach svg{width:16px;height:16px}
#work-files,#study-files{
  border:0;background:var(--accent-wash-2);color:var(--accent);
  font:inherit;font-size:var(--t-xs);font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;
}
#work-build{margin-inline-start:auto;}
#work-build{
  border:0;border-radius:var(--r3);background:var(--accent);color:#fff;
  font:inherit;font-weight:700;padding:9px 26px;cursor:pointer;
  transition:transform var(--d1) var(--ease),opacity var(--d1) var(--ease);
}
#work-build:active{transform:scale(.95)}
.work-starts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin:0;padding:0}

/* split: code+simulator (right) | chat (left). DOM order is code-first
   so it lands on the right in this RTL layout. */
.work-split{flex:1;min-height:0;display:flex;flex-direction:row;gap:var(--s4);animation:viewIn .3s var(--ease);width:100%;max-width:1200px;margin-inline:auto}
.wpane-code{
  flex:1.2;min-width:0;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r5);box-shadow:var(--shadow-2);overflow:hidden;
}
.wpane-chat{
  flex:1;min-width:0;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r5);box-shadow:var(--shadow-2);overflow:hidden;
}

/* simulator */
.sim-head{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--border);
}
.sim-title{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-switch{
  display:flex;gap:2px;padding:2px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);
}
.sim-switch button{
  border:0;background:transparent;color:var(--text-3);
  font:inherit;font-size:var(--t-xs);font-weight:700;padding:5px 16px;border-radius:999px;cursor:pointer;
  transition:background var(--d2) var(--ease),color var(--d2) var(--ease);
}
.sim-switch button.on{background:var(--accent);color:#fff}
.sim-body{position:relative;flex:1;min-height:0;overflow:auto;background:var(--canvas)}
#sim-empty{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:var(--text-3);font-size:var(--t-sm);padding:var(--s6);
}
#sim-empty[hidden]{display:none}
#sim-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
#sim-frame[hidden]{display:none}
#sim-code{padding:var(--s3)}
#sim-code[hidden]{display:none}
#sim-pre{
  margin:0;direction:ltr;text-align:left;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r3);padding:var(--s3);
  overflow:auto;max-height:100%;
  font-family:var(--f-mono);font-size:.8rem;line-height:1.65;white-space:pre;
}
#sim-pre[hidden]{display:none}
#sim-code-el{font:inherit}

/* chat pane */
.wch-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--border);font-weight:700;
}
#work-proj{
  flex:1;min-width:0;max-width:220px;border:1px solid var(--border-2);background:var(--canvas);
  color:var(--text);font:inherit;font-size:var(--t-xs);font-weight:700;
  border-radius:999px;padding:5px 10px;cursor:pointer;
}
#work-model,#study-model{
  min-width:0;max-width:190px;border:1px solid var(--border-2);background:var(--canvas);
  color:var(--text);font:inherit;font-size:var(--t-xs);font-weight:700;
  border-radius:999px;padding:5px 10px;cursor:pointer;
}
#work-docs{
  flex-shrink:0;width:38px;height:38px;border:1px solid var(--border-2);border-radius:50%;
  background:transparent;cursor:pointer;font-size:1rem;display:grid;place-items:center;
}
#work-docs:active{transform:scale(.92)}
.use-today{padding:8px 4px 2px;color:var(--text-3);font-size:var(--t-xs);text-align:center}
.wsrc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:var(--s2);font-size:var(--t-xs)}
.wsrc-t{color:var(--text-3);font-weight:700}
.wsrc a{color:var(--accent);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:3px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsrc a:hover{background:var(--surface-2)}
.uedit{border:0;background:transparent;color:var(--text-3);font:inherit;font-size:var(--t-xs);cursor:pointer;padding:4px 2px;align-self:flex-start}
.uedit:hover{color:var(--accent)}
.uedit-box textarea{width:100%;min-height:90px;resize:vertical;background:var(--canvas);color:var(--text);border:1px solid var(--accent);border-radius:8px;padding:8px;font:inherit;font-size:var(--t-sm);line-height:1.7}
.uedit-box textarea:focus{outline:none}
.uedit-bar{display:flex;gap:8px;margin-top:6px}
.uedit-bar button{border:0;border-radius:8px;font:inherit;font-size:var(--t-xs);font-weight:700;padding:6px 16px;cursor:pointer}
.uedit-bar [data-x="ok"]{background:var(--accent);color:#fff}
.uedit-bar [data-x="cancel"]{background:var(--surface-2);color:var(--text-2)}
#work-new{
  border:1px solid var(--border-2);background:transparent;color:var(--text-2);
  font:inherit;font-size:var(--t-xs);font-weight:700;padding:5px 14px;border-radius:999px;cursor:pointer;
}
#work-new:hover{color:var(--text);background:var(--surface-2)}
#work-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3)}
.wmsg-you,.wmsg-ai{max-width:100%;border-radius:12px;padding:var(--s2) var(--s3);font-size:var(--t-sm);line-height:1.7}
.wmsg-you{background:var(--accent-wash-2);border:1px solid var(--border);align-self:flex-start;display:flex;gap:var(--s2);align-items:flex-start;cursor:pointer}
.wmsg-you>span{flex:1;min-width:0;overflow-wrap:anywhere}
.wmsg-ai{background:var(--surface-2);border:1px solid var(--border);align-self:stretch;overflow-wrap:anywhere}
.wmsg-ai p{margin:0 0 .5em}
.wmsg-ai p:last-child{margin-bottom:0}
.wmsg-del{border:0;background:transparent;color:var(--text-3);cursor:pointer;flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;border-radius:6px}
.wmsg-del:hover{color:var(--danger)}
.wmsg-del svg{width:13px;height:13px}
.work-follow{display:flex;gap:var(--s2);padding:var(--s2) var(--s3) var(--s3);border-top:1px solid var(--border)}
#work-follow{
  flex:1;min-width:0;border:1px solid var(--border-2);background:var(--canvas);color:var(--text);
  font:inherit;font-size:var(--t-sm);line-height:1.6;resize:none;height:38px;max-height:120px;
  border-radius:var(--r3);padding:8px 12px;
}
#work-follow:focus{outline:none;border-color:var(--accent)}
#work-send{
  flex-shrink:0;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--accent);color:#fff;cursor:pointer;display:grid;place-items:center;
}
#work-send:active{transform:scale(.92)}
#work-send svg{width:18px;height:18px}

/* code toolbar + editor (simulator) */
.wtools{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.wtool{
  border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);
  font:inherit;font-size:var(--t-xs);font-weight:700;padding:6px 14px;border-radius:999px;cursor:pointer;
  transition:background var(--d1) var(--ease),transform var(--d1) var(--ease);
}
.wtool:hover{background:var(--surface-3)}
.wtool:active{transform:scale(.94)}
.wno-code{
  margin-top:var(--s3);padding:var(--s3);border:1px dashed var(--border-2);
  border-radius:var(--r3);text-align:center;color:var(--text-2);
  display:flex;flex-direction:column;gap:var(--s2);align-items:center;
}
.wno-code p{margin:0}
.wedit textarea{
  width:100%;min-height:160px;resize:vertical;direction:ltr;text-align:left;
  background:var(--canvas);color:var(--text);border:1px solid var(--accent);
  border-radius:var(--r3);padding:var(--s2);
  font-family:var(--f-mono);font-size:.82rem;line-height:1.6;
}
.wedit textarea:focus{outline:none}
.wedit-bar{display:flex;gap:var(--s2);margin-top:var(--s2)}
.wedit-bar button{
  border:0;border-radius:var(--r3);font:inherit;font-size:var(--t-sm);font-weight:700;
  padding:7px 20px;cursor:pointer;
}
.wedit-bar [data-x="ok"]{background:var(--accent);color:#fff}
.wedit-bar [data-x="cancel"]{background:var(--surface-2);color:var(--text-2)}

/* stacked on small screens: simulator on top, chat below */
@media (max-width:900px){
  #work.split{overflow-y:auto}
  #work.split .work-wrap{height:auto;max-width:var(--measure)}
  .work-split{flex-direction:column;overflow:visible}
  .wpane-code{min-height:62vh}
  .wpane-chat{min-height:60vh}
  #work-list{max-height:50vh}
}

/* ---- Arabic identity + motion ---- */

/* ruqaa display heading with warm gradient */
.work-hero h2{
  font-family:"Aref Ruqaa",serif;font-weight:700;
  font-size:clamp(2.6rem,1.7rem + 3.6vw,3.6rem);line-height:1.5;
  background:linear-gradient(120deg,var(--text) 30%,var(--accent) 70%,var(--text) 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheenText 7s linear infinite;
}
@keyframes sheenText{to{background-position:200% center}}
.work-hero>p{font-size:var(--t-h3)}
/* thin arabesque divider under the hero line */
.work-hero>p::after{
  content:"✦";display:block;margin-top:var(--s2);color:var(--accent);opacity:.8;
  letter-spacing:12px;text-indent:12px;
}

/* faint eight-point geometry behind the split view */
#work.split{
  background-image:
    repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 5%,transparent) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(-45deg,color-mix(in srgb,var(--accent) 5%,transparent) 0 1px,transparent 1px 14px);
}

/* staggered message entrances */
@keyframes msgIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
#work-list>.wmsg-you,#work-list>.wmsg-ai{animation:msgIn .45s var(--ease) backwards}
#work-list>:nth-child(2){animation-delay:.06s}
#work-list>:nth-child(3){animation-delay:.12s}
#work-list>:nth-child(4){animation-delay:.18s}
#work-list>:nth-child(5){animation-delay:.24s}
#work-list>:nth-child(n+6){animation-delay:.3s}

/* sheen sweep on the build button */
#work-build{position:relative;overflow:hidden}
#work-build::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  transform:translateX(-150%);transition:transform .8s var(--ease);pointer-events:none;
}
#work-build:hover::after{transform:translateX(150%)}

/* starter chips lift */
.work-starts .qchip{transition:transform var(--d2) var(--ease),box-shadow var(--d2) var(--ease)}
.work-starts .qchip:hover{transform:translateY(-3px)}

/* simulator fades in, switch glows */
@keyframes frameIn{from{opacity:0}to{opacity:1}}
#sim-frame:not([hidden]){animation:frameIn .6s var(--ease)}
.sim-switch button.on{box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 45%,transparent)}
.wpane-code,.wpane-chat{transition:box-shadow var(--d3) var(--ease),transform var(--d3) var(--ease)}
.wpane-code:hover,.wpane-chat:focus-within{box-shadow:var(--shadow-2),0 0 0 1px var(--border-2)}

/* shimmer while the AI is building */
.wmsg-ai:has(.wcard-stop){position:relative;overflow:hidden}
.wmsg-ai:has(.wcard-stop)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--accent) 14%,transparent) 50%,transparent 80%);
  animation:buildShimmer 1.6s var(--ease) infinite;
}
@keyframes buildShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* continue bar */
.wcontinue{
  margin-top:var(--s3);padding:var(--s3);border:1px dashed var(--accent);
  border-radius:var(--r3);text-align:center;
  display:flex;flex-direction:column;gap:var(--s2);align-items:center;
  animation:msgIn .4s var(--ease);
}
.wcontinue p{margin:0;color:var(--text-2)}

@media (prefers-reduced-motion:reduce){
  .work-hero h2{animation:none}
  #work-list>.wmsg-you,#work-list>.wmsg-ai{animation:none}
  #work-build::after{display:none}
  #sim-frame:not([hidden]){animation:none}
  .wmsg-ai:has(.wcard-stop)::after{display:none}
  .wcontinue{animation:none}
}
/* Study — agent view (reuses work tokens where sensible) */

.study-wrap{max-width:var(--measure)}
.study-hero{display:flex;flex-direction:column;gap:var(--s3);text-align:center;padding-top:var(--s6)}
.study-hero h2{
  font-family:"Aref Ruqaa",serif;font-weight:700;margin:0;
  font-size:clamp(2.6rem,1.7rem + 3.6vw,3.6rem);line-height:1.5;
  background:linear-gradient(120deg,var(--text) 30%,var(--accent) 70%,var(--text) 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheenText 7s linear infinite;
}
.study-hero>p{margin:0;color:var(--text-2)}
.study-hero>p::after{
  content:"✦";display:block;margin-top:var(--s2);color:var(--accent);opacity:.8;
  letter-spacing:12px;text-indent:12px;
}
.study-modes{align-self:center}
.study-hint{color:var(--text-3);font-size:var(--t-xs)}
#study-go{
  border:0;border-radius:var(--r3);background:var(--accent);color:#fff;
  font:inherit;font-weight:700;padding:9px 26px;cursor:pointer;margin-inline-start:auto;
  transition:transform var(--d1) var(--ease);
}
#study-go:active{transform:scale(.95)}
#study-out{display:flex;flex-direction:column;gap:var(--s4)}
.study-empty{text-align:center;color:var(--text-3);padding:var(--s6) 0}
#study-out .wmsg-ai{
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r5);
  box-shadow:var(--shadow-2);padding:var(--s3) var(--s4);font-size:var(--t-body);line-height:1.8;
  animation:msgIn .4s var(--ease);
}
#study-out .wmsg-ai p{margin:0 0 .5em}
#study-out .wmsg-ai p:last-child{margin-bottom:0}

/* flashcards */
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s3);margin-top:var(--s2)}
.fcard{
  border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);
  border-radius:var(--r4);padding:var(--s4) var(--s3);min-height:130px;cursor:pointer;
  font:inherit;font-size:var(--t-body);line-height:1.7;text-align:center;
  display:grid;place-items:center;
  transition:transform var(--d2) var(--ease),border-color var(--d2) var(--ease),background var(--d2) var(--ease);
  animation:msgIn .4s var(--ease) backwards;
}
.fcards>.fcard:nth-child(2){animation-delay:.05s}
.fcards>.fcard:nth-child(3){animation-delay:.1s}
.fcards>.fcard:nth-child(n+4){animation-delay:.15s}
.fcard:hover{transform:translateY(-3px);border-color:var(--accent)}
.fcard.flip{background:var(--accent-wash-2);border-color:var(--accent)}
.fcard .fa{color:var(--accent);font-weight:700}

/* focus timer */
.focus-box{
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r5);
  box-shadow:var(--shadow-2);padding:var(--s6) var(--s4);text-align:center;
  display:flex;flex-direction:column;gap:var(--s4);align-items:center;
  animation:msgIn .4s var(--ease);
}
.focus-time{
  font-size:clamp(3rem,2rem + 6vw,4.2rem);font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1;letter-spacing:2px;
}
.focus-presets{display:flex;gap:var(--s2)}
.focus-presets button{
  border:1px solid var(--border-2);background:transparent;color:var(--text-2);
  font:inherit;font-weight:700;padding:6px 18px;border-radius:999px;cursor:pointer;
}
.focus-presets button.on{background:var(--accent);border-color:transparent;color:#fff}
.focus-btns{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}
.focus-btns button{
  border:0;border-radius:var(--r3);font:inherit;font-weight:700;padding:9px 24px;cursor:pointer;
}
.focus-btns button:disabled{opacity:.4;cursor:default}
#focus-start{background:var(--accent);color:#fff}
#focus-pause,#focus-finish{background:var(--surface-2);color:var(--text)}
.focus-total{margin:0;color:var(--text-2);font-size:var(--t-sm)}

@media (prefers-reduced-motion:reduce){
  .study-hero h2{animation:none}
  #study-out .wmsg-ai,.fcards .fcard,.focus-box{animation:none}
}
/* Sketch pass — boxy, centered, hand-drawn wobble for chat/study/work.
   Square chrome, hard offset shadows, pen-wobble borders via the #hand
   SVG filter (static filter = cheap; no animation, so no motion guard needed). */

/* --- square the round chrome --- */
#view-switch,#view-switch button,
.sim-switch,.sim-switch button,
.qchip,.wtool,#work-files,#study-files,
.focus-presets button{border-radius:4px}
.wcard,.wpane-code,.wpane-chat,.work-box,.focus-box,.fcard{border-radius:4px}
#sim-pre,.wedit textarea{border-radius:4px}
.wmsg-you,.wmsg-ai{border-radius:10px 10px 10px 4px}
.wmsg-ai{border-radius:10px 10px 4px 10px}

/* --- hard offset shadows on the big boxes --- */
.work-box,.wpane-code,.wpane-chat,.focus-box{
  box-shadow:5px 5px 0 var(--accent-dim,rgba(0,0,0,.18));
}

/* --- pen-wobble border overlays (border drawn by ::before, wobbled by filter) --- */
.work-box,.wpane-code,.wpane-chat,.focus-box{position:relative}
.work-box::after,.wpane-code::after,.wpane-chat::after,.focus-box::after{
  content:"";position:absolute;inset:0;border:2px solid var(--text-3);border-radius:4px;
  filter:var(--hand-filter);pointer-events:none;opacity:.55;
}
.wpane-code::after,.wpane-chat::after{opacity:.35}

/* --- flashcards get the full sketch treatment --- */
.fcard{border-width:2px;box-shadow:3px 3px 0 var(--accent-dim,rgba(0,0,0,.18))}
.fcard:nth-child(odd){transform:rotate(-.5deg)}
.fcard:nth-child(even){transform:rotate(.5deg)}
.fcard:hover{transform:translateY(-3px) rotate(0deg)}

/* top install banner: our own UI */
#install-bar{
  position:fixed;top:calc(var(--topbar-h,58px) + var(--sa-top,0px) + 8px);left:calc(50% - 185px);
  transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:10px;
  width:max-content;max-width:calc(100% - 32px);
  background:var(--surface-2);border:2px solid var(--accent);border-radius:8px;
  box-shadow:4px 4px 0 var(--accent-dim,rgba(0,0,0,.18));
  padding:8px 8px 8px 14px;font-size:var(--t-sm);font-weight:700;
}
#install-bar[hidden]{display:none}
.ib-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#install-go{border:0;border-radius:6px;background:var(--accent);color:#fff;font:inherit;font-weight:700;padding:7px 20px;cursor:pointer;flex-shrink:0}
#install-go:active{transform:scale(.95)}
#install-x{border:0;background:transparent;color:var(--text-3);font-size:1.15rem;line-height:1;cursor:pointer;padding:4px 8px;flex-shrink:0}
@media (max-width:640px){
  #install-bar{left:50%}
}

/* --- chat column: keep centered measure, square bubbles' tails --- */
.mrow .ubub{border-radius:10px 10px 4px 10px}
.mrow .aic pre{border-radius:4px}
.ch,.runout,.htmlpreview,.tbl-wrap{border-radius:4px}
.wsrc a{border-radius:4px}

/* --- Arabic readability: airier lines, no pinched joins --- */
body{line-height:1.75}
#pinput,.wmsg-you,.wmsg-ai{line-height:1.85}
h1,h2,h3,.h1,.wcard-title,.sim-title{line-height:1.6}
button,input,textarea,select{letter-spacing:0}
.tab,.plug-t,.wtool,.qchip{font-weight:700}
/* First-run styles: splash + settings chips + guest nudge.
   Same language as the app: boxy, 1px borders, .btn components. */
#splash{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:var(--canvas);transition:opacity .4s ease,visibility .4s}
#splash.bye{opacity:0;visibility:hidden;pointer-events:none}
.sp-word{font-family:"Aref Ruqaa","Tajawal",serif;font-size:64px;line-height:1;color:var(--text)}
.sp-logo{width:64px;height:64px;border-radius:16px}
.sp-dots{display:flex;gap:8px}
.sp-dots i{width:8px;height:8px;border-radius:50%;background:var(--border-3);animation:spp 1s infinite ease-in-out}
.sp-dots i:nth-child(2){animation-delay:.15s}
.sp-dots i:nth-child(3){animation-delay:.3s}
@keyframes spp{0%,100%{transform:translateY(0);background:var(--border-3)}50%{transform:translateY(-7px);background:var(--text)}}
/* chips follow .qchip: 32px, 1px border, boxy, transparent */
.ob-chips{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 16px}
.ob-chip{min-height:34px;padding:6px 18px;font-size:14px;font-weight:700;background:transparent;color:var(--text-2);border:1px solid var(--border);border-radius:var(--r2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ob-chip:hover{background:var(--surface-2);border-color:var(--border-2)}
.ob-chip:active{transform:translateY(1px)}
.ob-chip.on{background:var(--accent-wash,var(--surface-2));border-color:var(--accent);color:var(--text)}
/* guest nudge: slim inline card after the first reply */
.nudge{margin:14px auto;max-width:520px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r2);box-shadow:4px 4px 0 var(--accent-dim,rgba(0,0,0,.2));padding:14px 16px}
.nudge b{display:block;font-size:15.5px;color:var(--text);margin-bottom:2px}
.nudge p{margin:0 0 10px;font-size:13.5px;color:var(--text-2);line-height:1.7}
.nudge-btns{display:flex;flex-wrap:wrap;gap:8px}
@media (prefers-reduced-motion:reduce){.sp-dots i{animation:none}#splash{transition:none}}
/* auth modal opened above page content */
#auth-modal.above-onboard{z-index:300}

/* splash: staged brand entrance + progress line synced to the 1.15s boot */
.sp-logo{animation:spIn .55s cubic-bezier(.2,.9,.25,1.2) both}
.sp-word{animation:spUp .6s .12s ease both}
.sp-tag{font-size:14px;color:var(--text-3);font-weight:500;animation:spUp .6s .24s ease both}
.sp-bar{width:120px;height:3px;border-radius:99px;background:var(--border-2);overflow:hidden;animation:spUp .6s .3s ease both}
.sp-bar span{display:block;height:100%;width:40%;border-radius:inherit;background:var(--accent);animation:spFill 1.05s ease-in-out infinite}
@keyframes spIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes spUp{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes spFill{0%{transform:translateX(160%)}100%{transform:translateX(-320%)}}
[dir="rtl"] .sp-bar span{animation-name:spFillR}
@keyframes spFillR{0%{transform:translateX(-160%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){.sp-logo,.sp-word,.sp-tag,.sp-bar{animation:none}.sp-bar span{animation:none;width:100%}}

/* splash wears the live wallpaper (follows your theme), shade keeps text readable */
#splash{background:var(--shade,none),var(--photo,none) center/cover no-repeat,var(--sky,var(--canvas))}

/* readability veil over the wallpaper: felt, not seen. canvas-tinted so it
   fits every theme. content rides above it. */
#splash{gap:18px}
#splash::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--canvas) 12%,transparent),color-mix(in srgb,var(--canvas) 30%,transparent) 45%,color-mix(in srgb,var(--canvas) 72%,transparent));pointer-events:none}
#splash>*{position:relative;z-index:1}
.sp-word{font-size:76px}

/* one small islamic divider under the tagline: line, star, line */
.sp-div{display:flex;align-items:center;gap:10px;color:var(--accent-dim);font-size:11px;animation:spUp .6s .3s ease both}
.sp-div span{width:46px;height:1px;background:currentColor;opacity:.75}
/* Landing — long first-visit page. Portfolio-style motion (rise, reveal,
   counters, tilt, typewriter, marquee) in app tokens. Content is visible
   without JS: hidden states only apply under .land-js. */
#landing{position:fixed;inset:0;z-index:500;overflow-y:auto;background:var(--canvas);color:var(--text)}
/* landing wears whatever data-theme sits on it (wheel changes it live) —
   no hardcoded palette here; every rule below runs on vars */
/* atmosphere wheel: slim ring, live preview face, springy spin */
.land-wheel2{position:fixed;inset-inline-end:16px;top:50%;translate:0 -50%;z-index:30;display:flex;flex-direction:column;align-items:center;gap:7px}
.land-wheel2-tick{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.land-wheel2-btn{position:relative;width:76px;height:76px;border-radius:50%;padding:0;border:1px solid var(--border-2);cursor:pointer;background:var(--surface);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.land-wheel2-segs{position:absolute;inset:0;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,rgba(0,0,0,.28) 0deg 1.5deg,transparent 1.5deg 60deg),
    conic-gradient(from 0deg,#B8694A 0 60deg,#155A6C 60deg 120deg,#141D36 120deg 180deg,#2E6B4F 180deg 240deg,#F8DDC9 240deg 300deg,#DDE1E6 300deg 360deg);
  transition:transform .7s cubic-bezier(.3,1.35,.4,1);
}
.land-wheel2-face{position:absolute;inset:13px;border-radius:50%;border:1px solid var(--border-2);background:var(--photo,none) center/cover no-repeat,var(--sky,var(--surface-2))}
.land-wheel2-name{font-size:11.5px;font-weight:800;color:var(--text-2)}
@media (max-width:760px){
  /* shake is the mobile path — no wheel plate */
  .land-wheel2{display:none}
}
#landing[hidden]{display:none}
.land-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--canvas) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.land-brand{font-family:"Aref Ruqaa","Tajawal",serif;font-size:26px;line-height:1;display:flex;align-items:center;gap:10px}
.land-brand .brand-logo{width:26px;height:26px;border-radius:8px}
#landing[data-theme="dawn"] .land-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(250,247,243,.78),rgba(250,247,243,0) 62%)}
.land-progress{position:sticky;top:0;z-index:5;height:3px;background:transparent}
.land-progress span{display:block;height:100%;width:0;background:var(--accent)}
.land-main{max-width:1020px;margin:0 auto;padding:0 20px}
/* hero: the dunes panorama as main wallpaper (vars come from data-theme) */
.land-hero{position:relative;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding:52px 20px 60px;text-align:center;
  border-bottom:2px dashed var(--border-2);
  background:var(--scene) center bottom/cover no-repeat,var(--sky);
  background-color:#1C1218;
}
.land-hero-inner{max-width:720px;margin:0 auto;position:relative;z-index:1}
/* hand-drawn squiggle under the headline */
.land-u{position:relative;display:inline-block}
.land-u::after{content:"";position:absolute;inset-inline:0;bottom:-.12em;height:.22em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 12 2 22 8 T 42 8 T 62 8 T 82 8 T 102 8' fill='none' stroke='%23F2B88A' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
/* theme scenes as artwork (vars cascade from the data-theme attr) */
.land-scene-img{background:var(--scene,none) var(--scene-x,50%) bottom/cover no-repeat,var(--photo,none) center/cover no-repeat,var(--sky,var(--canvas));background-color:var(--canvas);min-height:150px}
.land-scene-img.sm{min-height:120px}
/* sketchy facts */
.land-facts li{border-style:dashed}
/* feature mocks sit slightly crooked, like taped sketches */
.land-feature:nth-of-type(odd) .land-mock{transform:rotate(.45deg)}
.land-feature:nth-of-type(even) .land-mock{transform:rotate(-.45deg)}
/* floating showcase cards (wide screens only) */
.land-float{position:absolute;z-index:1;width:215px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r2);box-shadow:0 18px 44px rgba(20,16,12,.16);padding:14px;font-size:13px;text-align:start;animation:land-floaty 5.5s ease-in-out infinite}
.lf-chat{right:max(24px,calc(50% - 560px));top:150px}
.lf-chat b{display:block;font-size:13.5px;margin-bottom:4px}
.lf-chat p{margin:0;color:var(--text-2);line-height:1.8}
.lf-art{left:max(24px,calc(50% - 560px));top:300px;padding:8px;animation-delay:1.4s;margin:0}
.lf-art img{display:block;width:100%;height:120px;object-fit:cover;border-radius:var(--r1)}
.lf-art figcaption{padding:8px 6px 4px;font-size:12.5px;font-weight:700;color:var(--text-2)}
@keyframes land-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:1150px){.land-float{display:none}}
.land-kicker{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-2);border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:800;color:var(--text-2);margin:0 0 16px}
.land-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.anim{animation:land-rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--ad,0s)}
@keyframes land-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.land-pills{justify-content:center;margin-bottom:20px}
.land-t{font-family:"Aref Ruqaa","Tajawal",serif;font-size:clamp(38px,7vw,56px);line-height:1.5;margin:0 0 10px}
.land-sub{margin:0 0 22px;color:var(--text-2);font-size:16.5px;line-height:1.9}
.land-big-cta{min-height:56px;padding:0 52px;font-size:19px;box-shadow:0 10px 30px -8px var(--accent)}
.land-big-cta:hover{filter:brightness(1.07)}
.land-big-cta:active{transform:translateY(1px)}
#land-form:focus-within{border-color:var(--accent);box-shadow:5px 5px 0 var(--accent)}
.land-mic{flex:none;width:42px;min-height:42px;display:grid;place-items:center;background:transparent;color:var(--text-3);border:1px solid transparent;border-radius:var(--r2);cursor:pointer}
.land-mic svg{width:19px;height:19px}
.land-mic:hover{background:var(--surface-2);color:var(--text)}
.land-mic.listening{background:var(--accent-wash);color:var(--accent);border-color:var(--accent);animation:micPulse 1.4s ease-in-out infinite}
#land-input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:16px;font-family:inherit;padding:8px 10px}
#land-input::placeholder{color:var(--text-3)}
.land-proof{margin:14px 0 26px;color:var(--text-3);font-size:13.5px}
.land-shake-hint{display:none;margin:-18px 0 26px;color:var(--text-3);font-size:13px}
@media (max-width:760px){.land-shake-hint{display:block}}
.land-facts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.land-facts li{min-width:130px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:12px 16px}
.land-facts strong{display:block;font-size:26px;color:var(--text)}
.land-facts span{font-size:12.5px;color:var(--text-2)}
/* reveal (JS-gated so no-JS still shows everything) */
#landing.land-js [data-reveal]{opacity:0;transform:translateY(34px) scale(.985);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
#landing.land-js [data-reveal].in{opacity:1;transform:none;filter:none}
/* strip */
.land-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 8px}
.land-strip-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:14px;font-size:13.5px;font-weight:700;color:var(--text-2);line-height:1.8}
.land-strip-item span{display:block;font-size:12px;color:var(--accent);font-weight:800}
/* feature spec rows */
.land-f-list{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px dashed var(--border-2);display:grid;gap:8px}
.land-f-list li{font-size:13.5px;color:var(--text-2);line-height:1.8}
.land-f-list strong{color:var(--text)}
/* how it works */
.land-how{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 8px}
.land-how>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:18px}
.land-how span{display:inline-block;font-size:12px;font-weight:800;color:var(--surface);background:var(--accent);border-radius:var(--r1);padding:2px 10px;margin-bottom:8px}
.land-how b{display:block;font-size:16px;margin-bottom:4px}
.land-how p{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.8}
@media (max-width:760px){.land-how{grid-template-columns:1fr}}
/* sections */
.land-section{padding:44px 0 8px}
.land-section.narrow{max-width:720px;margin:0 auto}
.land-sec-head{margin-bottom:26px}
.land-eyebrow{color:var(--accent);font-weight:800;font-size:13.5px;margin:0 0 6px}
.land-sec-head h2{font-family:"Aref Ruqaa","Tajawal",serif;font-size:clamp(26px,4.5vw,36px);margin:0 0 8px;line-height:1.6}
.land-hl{color:var(--accent)}
.land-sec-sub{color:var(--text-2);margin:0;line-height:1.9}
/* features */
.land-feature{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;margin-bottom:30px}
.land-feature.flip .land-f-meta{order:2}
.land-f-num{font-size:13px;font-weight:800;color:var(--accent)}
.land-f-kind{color:var(--text-3);font-size:13px;margin:2px 0 4px}
.land-f-meta h3{font-size:22px;margin:0 0 8px}
.land-f-meta p{color:var(--text-2);line-height:1.9;margin:0;font-size:15px}
.land-visual{display:flex;justify-content:center}
.land-mock{width:min(340px,100%);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r3);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.18);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;will-change:transform}
.land-mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:12px;color:var(--text-3)}
.land-mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--border-2)}
.land-mock-bar span{margin-inline-start:6px}
.land-mock-chat{padding:4px 16px 18px;display:grid;gap:10px}
.land-mock-chat .q{background:var(--accent-wash,var(--surface-2));border:1px solid var(--border);padding:10px 14px;border-radius:12px 12px 4px 12px;justify-self:end;max-width:88%;font-size:14px}
.land-mock-chat .a{background:var(--canvas);border:1px solid var(--border);padding:10px 14px;border-radius:12px 12px 12px 4px;justify-self:start;max-width:88%;font-size:14px;min-height:44px}
.land-mock-chat .a::after{content:"▍";color:var(--accent);animation:land-blink 1s steps(1) infinite}
@keyframes land-blink{50%{opacity:0}}
.land-mock-sub{text-align:center;color:var(--text-3);font-size:13px;padding:0 16px 16px;margin:0}
.land-wave{display:flex;align-items:center;justify-content:center;gap:5px;height:74px;padding:0 20px}
.land-wave b{width:6px;border-radius:3px;background:var(--accent);animation:land-eq 1.1s ease-in-out infinite;transform-origin:center}
.land-wave b:nth-child(1){height:30%;animation-delay:0s}
.land-wave b:nth-child(2){height:55%;animation-delay:.12s}
.land-wave b:nth-child(3){height:80%;animation-delay:.24s}
.land-wave b:nth-child(4){height:45%;animation-delay:.36s}
.land-wave b:nth-child(5){height:95%;animation-delay:.48s}
.land-wave b:nth-child(6){height:60%;animation-delay:.6s}
.land-wave b:nth-child(7){height:88%;animation-delay:.72s}
.land-wave b:nth-child(8){height:40%;animation-delay:.84s}
.land-wave b:nth-child(9){height:70%;animation-delay:.2s}
.land-wave b:nth-child(10){height:52%;animation-delay:.44s}
.land-wave b:nth-child(11){height:78%;animation-delay:.68s}
.land-wave b:nth-child(12){height:35%;animation-delay:.9s}
.land-wave b:nth-child(13){height:62%;animation-delay:.32s}
.land-wave b:nth-child(14){height:48%;animation-delay:.56s}
@keyframes land-eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.land-art{margin:0 16px 12px;height:130px;border-radius:var(--r2);background:linear-gradient(180deg,#2A1622 0%,#B8694A 55%,#E8A56C 75%,#3A2A20 100%);display:flex;align-items:flex-end;padding:12px}
.land-art span{background:rgba(0,0,0,.45);color:#fff;font-size:13px;font-weight:700;padding:6px 12px;border-radius:var(--r2)}
.land-mock-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.land-mock-chips span{font-size:12px;font-weight:700;color:var(--text-2);border:1px solid var(--border);border-radius:var(--r2);padding:4px 10px}
.land-src{display:flex;gap:10px;align-items:flex-start;margin:0 16px 10px;background:var(--canvas);border:1px solid var(--border);border-radius:var(--r2);padding:10px 12px}
.land-src b{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--accent-wash,var(--surface-2));border:1px solid var(--accent);color:var(--accent);border-radius:50%;font-size:12px}
.land-src p{margin:0;font-size:13.5px;color:var(--text-2)}
.land-code{display:grid;gap:8px;padding:6px 16px 14px}
.land-code span{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--accent) 0 30%,var(--border-2) 30% 100%)}
.land-code span.w60{width:60%}
.land-code span.w80{width:80%}
.land-code span.w40{width:40%}
.land-timer{text-align:center;font-size:44px;font-weight:800;color:var(--text);margin:6px 0 4px;letter-spacing:2px}
.land-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(340px,100%)}
.land-swatches span{height:74px;border-radius:var(--r2);border:1px solid var(--border-2);background:var(--sw)}
/* more list */
.land-more-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.land-more-list li{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:16px 18px}
.land-more-list h3{margin:0 0 4px;font-size:16px}
.land-more-list p{margin:0;color:var(--text-2);font-size:14px;line-height:1.8}
/* lab grid */
.land-lab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.land-lab-grid article{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:18px}
.land-lab-grid h3{margin:0 0 6px;font-size:16px;color:var(--accent)}
.land-lab-grid p{margin:0;color:var(--text-2);font-size:14px;line-height:1.8}
/* close */
.land-close{text-align:center;padding:60px 0 30px;position:relative;overflow:hidden}
.land-giant{white-space:nowrap;overflow:hidden;font-family:"Aref Ruqaa","Tajawal",serif;font-size:52px;color:var(--border-2);margin-bottom:18px;user-select:none}
.land-giant span{display:inline-block;will-change:transform}
.land-close h2{font-family:"Aref Ruqaa","Tajawal",serif;font-size:clamp(30px,6vw,44px);line-height:1.6;margin:0 0 8px}
.land-close p{color:var(--text-2);margin:0 0 20px}
.land-cta{min-height:48px;padding:0 40px;font-size:17px}
.land-colophon{margin-top:26px;font-size:12.5px;color:var(--text-3)}
.land-footer{display:flex;justify-content:space-between;gap:10px;padding:18px 20px;border-top:1px solid var(--border);color:var(--text-3);font-size:13px;max-width:1020px;margin:0 auto}
/* prompt marquee */
.land-mq-wrap{overflow:hidden;margin:6px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.land-mq{display:flex;width:max-content;animation:land-mq 30s linear infinite}
.land-mq:hover{animation-play-state:paused}
.land-mq-set{display:flex;gap:10px;margin-inline-end:10px}
.land-mq-set button{white-space:nowrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:8px 16px;font-size:13.5px;font-weight:700;color:var(--text-2);cursor:pointer;font-family:inherit}
.land-mq-set button:hover{border-color:var(--accent);color:var(--text)}
@keyframes land-mq{to{transform:translateX(50%)}}
/* live demo */
.land-demo{display:flex;justify-content:center}
.land-demo .land-mock{width:min(460px,100%)}
.land-demo-body{padding:6px 16px 18px;display:grid;gap:10px;min-height:230px}
.land-demo-body .q{background:var(--accent-wash);border:1px solid var(--border);padding:10px 14px;border-radius:12px 12px 4px 12px;justify-self:end;max-width:88%;font-size:14px;margin:0;animation:land-rise .5s cubic-bezier(.2,.7,.2,1) both}
.land-demo-body .a{background:var(--canvas);border:1px solid var(--border);padding:10px 14px;border-radius:12px 12px 12px 4px;justify-self:start;max-width:88%;font-size:14px;margin:0;animation:land-rise .5s cubic-bezier(.2,.7,.2,1) both}
.land-demo-body .typing{display:inline-flex;gap:5px;padding:12px 16px;justify-self:start;background:var(--canvas);border:1px solid var(--border);border-radius:12px 12px 12px 4px}
.land-demo-body .typing i{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:land-tb 1s infinite}
.land-demo-body .typing i:nth-child(2){animation-delay:.15s}
.land-demo-body .typing i:nth-child(3){animation-delay:.3s}
@keyframes land-tb{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.land-demo-art{height:90px;border-radius:var(--r2);background:linear-gradient(135deg,#2A1622,#B8694A 60%,#E8A56C);margin-top:8px}
/* faq */
.land-faq{display:grid;gap:10px}
.land-faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:6px 16px}
.land-faq summary{cursor:pointer;font-weight:800;font-size:15px;padding:10px 0;list-style-position:inside}
.land-faq summary::marker{color:var(--accent)}
.land-faq details p{margin:0 0 12px;color:var(--text-2);font-size:14px;line-height:1.9}
/* sticky cta */
.land-sticky{position:fixed;bottom:14px;left:50%;transform:translate(-50%,90px);display:flex;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--border-2);border-radius:var(--r2);box-shadow:4px 4px 0 var(--accent-dim,rgba(0,0,0,.2));padding:8px 8px 8px 16px;font-size:14px;font-weight:800;z-index:20;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.land-sticky[hidden]{display:none}
.land-sticky.show{transform:translate(-50%,0)}
@media (max-width:760px){
  .land-feature{grid-template-columns:1fr;gap:16px}
  .land-feature.flip .land-f-meta{order:0}
  .land-strip{grid-template-columns:repeat(2,1fr)}
  .land-lab-grid{grid-template-columns:1fr}
  .land-facts li{min-width:calc(50% - 4px);flex:1}
}
/* photo gallery: real in-app scenery */
.land-gal{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;-webkit-overflow-scrolling:touch}
.land-gal figure{flex:0 0 240px;margin:0;scroll-snap-align:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.land-gal .land-scene-img{min-height:140px;border-bottom:1px solid var(--border)}
.land-gal figcaption{padding:8px 12px;font-size:13px;font-weight:700;color:var(--text-2)}
@media (prefers-reduced-motion:reduce){
  .anim{animation:none}
  .land-float{animation:none}
  .land-mq{animation:none}
  .land-mq-wrap{overflow-x:auto}
  .land-orbit svg{animation:none}
  .land-wave b{animation:none}
  .land-mock-chat .a::after{animation:none;content:""}
}
/* Todos in the sidebar — boxy, app-native */
.sb-todos{border-top:1px solid var(--border);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);max-height:38%;overflow-y:auto;flex-shrink:0}
.sb-todos-head{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-sm);font-weight:800;color:var(--text-2)}
#todo-count{background:var(--accent);color:var(--on-accent);font-size:11px;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 6px}
#todo-count[hidden]{display:none}
.sb-todo-add{display:flex;gap:var(--s2)}
#todo-input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);height:34px;padding:0 var(--s3);color:var(--text);font-size:var(--t-sm);font-family:inherit;outline:none}
#todo-input:focus{border-color:var(--accent)}
#todo-input::placeholder{color:var(--text-4)}
#todo-add{flex:none;width:34px;height:34px;border-radius:var(--r2);background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);font-size:18px;font-weight:800;cursor:pointer;line-height:1}
#todo-add:hover{border-color:var(--accent);color:var(--accent)}
#todo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.todo-empty{font-size:var(--t-xs);color:var(--text-4);line-height:1.7}
.todo{display:flex;align-items:center;gap:var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:7px 10px}
.todo-check{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border-3);background:none;color:var(--on-accent);font-size:13px;font-weight:800;cursor:pointer;display:grid;place-items:center;line-height:1}
.todo.done .todo-check{background:var(--accent);border-color:var(--accent)}
.todo-text{flex:1;min-width:0;font-size:var(--t-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo.done .todo-text{color:var(--text-4);text-decoration:line-through}
.todo-time{flex:none;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-wash);border-radius:6px;padding:2px 8px;white-space:nowrap}
.todo-del{flex:none;width:22px;height:22px;border:none;background:none;color:var(--text-4);font-size:15px;cursor:pointer;border-radius:6px;line-height:1}
.todo-del:hover{background:var(--danger-wash);color:var(--danger)}