Ana Sayfa Keşfet Yardım
Giriş Yap
u23-27gurkin
/
wave-spectr
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Dal: master
Dallar Biçim İmleri
wave-spectr
/
docs
/
index.html

index.html 181 KB
Kalıcı Bağlantı Geçmiş Ham

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="ru">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    6. 

  6.     <meta name="theme-color" content="#9C27B0">
    7. 

  7.     <meta name="apple-mobile-web-app-capable" content="yes">
    8. 

  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    9. 

  9.     <title>HarmoniX v21.0 | Academy & InfoSec</title>
    10. 

  10. 

  11.     <style>
    12. 

  12.         /* ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ И ДИНАМИЧЕСКИЕ ТЕМЫ */
    13. 

  13.         :root {
    14. 

  14.             --bg-color: #f6f8fb; --panel-rgb: 255, 255, 255; --text-color: #1a1a24; 
    15. 

  15.             --border-color: rgba(156, 39, 176, 0.35); --accent: #9C27B0; 
    16. 

  16.             --base-wave: #2196F3; --accent-alt: #FF5722; --btn-glow: rgba(156, 39, 176, 0.45);
    17. 

  17.             --canvas-bg: rgba(250, 250, 250, 0.9); --glass-alpha: 0.88; 
    18. 

  18.             --glass-blur: 16px; --glass-saturate: 135%; --glass-border: rgba(255, 255, 255, 0.85); 
    19. 

  19.             --element-border: rgba(156, 39, 176, 0.45); --content-bg: rgba(255, 255, 255, 0.92); 
    20. 

  20.             --badge-bg: rgba(156, 39, 176, 0.12); --tzi-color: #00E676; --tzi-glow: rgba(0, 230, 118, 0.5);
    21. 

  21.             --wave-btn-radius: 18px 6px 18px 6px; --wave-btn-hover: 6px 18px 6px 18px;
    22. 

  22.         }
    23. 

  23. 

  24.         [data-theme="dark"] { --bg-color: #121214; --panel-rgb: 28, 28, 34; --text-color: #eeeeee; --border-color: rgba(187, 134, 252, 0.4); --accent: #bb86fc; --base-wave: #03dac6; --accent-alt: #FF9800; --btn-glow: rgba(187, 134, 252, 0.6); --canvas-bg: rgba(18, 18, 22, 0.9); --glass-border: rgba(255, 255, 255, 0.16); --element-border: rgba(187, 134, 252, 0.5); --content-bg: rgba(28, 28, 34, 0.92); --badge-bg: rgba(187, 134, 252, 0.18); }
    25. 

  25.         [data-theme="neon"] { --bg-color: #000016; --panel-rgb: 10, 10, 30; --text-color: #00ffff; --border-color: rgba(255, 0, 255, 0.7); --accent: #ff00ff; --base-wave: #00ffff; --accent-alt: #FFEA00; --btn-glow: rgba(255, 0, 255, 0.8); --canvas-bg: rgba(0, 0, 0, 0.9); --glass-border: rgba(0, 255, 255, 0.5); --element-border: rgba(255, 0, 255, 0.7); --content-bg: rgba(10, 10, 25, 0.95); --badge-bg: rgba(255, 0, 255, 0.2); }
    26. 

  26.         [data-theme="ocean"] { --bg-color: #0f2027; --panel-rgb: 15, 32, 39; --text-color: #e0f7fa; --border-color: rgba(33, 147, 176, 0.6); --accent: #2193b0; --base-wave: #4facfe; --accent-alt: #FFCA28; --btn-glow: rgba(33, 147, 176, 0.6); --canvas-bg: rgba(10, 20, 25, 0.9); --glass-border: rgba(79, 172, 254, 0.4); --element-border: rgba(33, 147, 176, 0.6); --content-bg: rgba(20, 40, 50, 0.9); --badge-bg: rgba(33, 147, 176, 0.2); }
    27. 

  27.         [data-theme="forest"] { --bg-color: #134e5e; --panel-rgb: 19, 78, 94; --text-color: #e8f5e9; --border-color: rgba(113, 178, 128, 0.6); --accent: #71b280; --base-wave: #a8e063; --accent-alt: #FFB300; --btn-glow: rgba(113, 178, 128, 0.6); --canvas-bg: rgba(10, 40, 30, 0.9); --glass-border: rgba(168, 224, 99, 0.4); --element-border: rgba(113, 178, 128, 0.6); --content-bg: rgba(25, 60, 50, 0.9); --badge-bg: rgba(113, 178, 128, 0.2); }
    28. 

  28.         [data-theme="sunset"] { --bg-color: #2b1055; --panel-rgb: 43, 16, 85; --text-color: #ffe53b; --border-color: rgba(255, 37, 37, 0.6); --accent: #ff2525; --base-wave: #ff2525; --accent-alt: #ff9100; --btn-glow: rgba(255, 37, 37, 0.6); --canvas-bg: rgba(20, 10, 40, 0.9); --glass-border: rgba(255, 229, 59, 0.4); --element-border: rgba(255, 37, 37, 0.6); --content-bg: rgba(40, 20, 60, 0.9); --badge-bg: rgba(255, 37, 37, 0.2); }
    29. 

  29.         [data-theme="cyber"] { --bg-color: #fcee0a; --panel-rgb: 20, 20, 20; --text-color: #00ffff; --border-color: rgba(255, 0, 85, 0.9); --accent: #ff0055; --base-wave: #0ff; --accent-alt: #00E5FF; --btn-glow: rgba(255, 0, 85, 0.8); --canvas-bg: rgba(0, 0, 0, 0.95); --glass-border: rgba(255, 238, 10, 0.7); --element-border: rgba(255, 0, 85, 0.9); --content-bg: rgba(20, 20, 20, 0.95); --badge-bg: rgba(255, 0, 85, 0.25); }
    30. 

  30.         [data-theme="coffee"] { --bg-color: #f3e5f5; --panel-rgb: 239, 222, 205; --text-color: #4e342e; --border-color: rgba(141, 110, 99, 0.6); --accent: #795548; --base-wave: #8d6e63; --accent-alt: #d84315; --btn-glow: rgba(121, 85, 72, 0.6); --canvas-bg: rgba(255, 248, 225, 0.9); --glass-border: rgba(255, 255, 255, 0.7); --element-border: rgba(141, 110, 99, 0.6); --content-bg: rgba(245, 230, 215, 0.9); --badge-bg: rgba(121, 85, 72, 0.2); }
    31. 

  31.         [data-theme="space"] { --bg-color: #000000; --panel-rgb: 15, 10, 30; --text-color: #e0e0e0; --border-color: rgba(126, 87, 194, 0.6); --accent: #7e57c2; --base-wave: #b39ddb; --accent-alt: #00e676; --btn-glow: rgba(126, 87, 194, 0.6); --canvas-bg: rgba(5, 5, 15, 0.9); --glass-border: rgba(179, 157, 219, 0.35); --element-border: rgba(126, 87, 194, 0.6); --content-bg: rgba(20, 15, 40, 0.9); --badge-bg: rgba(126, 87, 194, 0.22); }
    32. 

  32.         [data-theme="sakura"] { --bg-color: #fff0f5; --panel-rgb: 255, 240, 245; --text-color: #880e4f; --border-color: rgba(216, 27, 96, 0.5); --accent: #d81b60; --base-wave: #f06292; --accent-alt: #ff6f00; --btn-glow: rgba(216, 27, 96, 0.6); --canvas-bg: rgba(255, 250, 250, 0.9); --glass-border: rgba(255, 255, 255, 0.8); --element-border: rgba(216, 27, 96, 0.55); --content-bg: rgba(255, 235, 240, 0.9); --badge-bg: rgba(216, 27, 96, 0.18); }
    33. 

  33. 

  34.         * { box-sizing: border-box; margin: 0; padding: 0; }
    35. 

  35.         html, body { width: 100%; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--text-color); background-color: var(--bg-color); overflow-x: hidden; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
    36. 

  36.         .emoji-fix { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif; }
    37. 

  37. 

  38.         /* УВЕДОМЛЕНИЯ (TOASTS) */
    39. 

  39.         #toast-container { position: fixed; bottom: 25px; right: 25px; z-index: 9999999; display: flex; flex-direction: column; gap: 14px; pointer-events: none; }
    40. 

  40.         .toast { pointer-events: auto; background: rgba(var(--panel-rgb), 0.92); border-left: 5px solid var(--accent); border-radius: 12px; padding: 16px 20px; width: 330px; box-shadow: 0 12px 35px rgba(0,0,0,0.25); backdrop-filter: blur(12px); transform: translateX(120%); transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s ease; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; position: relative; overflow: hidden; }
    41. 

  41.         .toast.show { transform: translateX(0); opacity: 1; }
    42. 

  42.         .toast:hover { transform: translateX(-5px) scale(1.02); box-shadow: 0 15px 40px var(--btn-glow); }
    43. 

  43.         .toast-icon { font-size: 26px; animation: toastBounce 2s infinite; }
    44. 

  44.         .toast-content { flex-grow: 1; }
    45. 

  45.         .toast-title { font-weight: 900; font-size: 15px; color: var(--accent); margin-bottom: 4px; }
    46. 

  46.         .toast-text { font-size: 13px; line-height: 1.4; color: var(--text-color); font-weight: 500; }
    47. 

  47.         @keyframes toastBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
    48. 

  48. 

  49.         /* СИСТЕМА ПОДСКАЗОК (СТРЕЛОЧКИ) */
    50. 

  50.         .onboarding-hint { position: absolute; z-index: 5000; animation: pointBounce 1.5s infinite; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    51. 

  51.         .onboarding-text { background: var(--accent); color: #fff; padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: bold; white-space: nowrap; box-shadow: 0 4px 15px var(--btn-glow); border: 1.5px solid #fff; }
    52. 

  52.         @keyframes pointBounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } }
    53. 

  53. 

  54.         /* РЕЙТИНГ ЗВЕЗДЫ */
    55. 

  55.         .star-rating { display: inline-flex; flex-direction: row-reverse; gap: 6px; justify-content: center; margin: 15px 0; }
    56. 

  56.         .star-rating input { display: none; }
    57. 

  57.         .star-rating label { font-size: 38px; color: #ccc; cursor: pointer; transition: 0.2s; text-shadow: 0 2px 4px rgba(0,0,0,0.2); line-height: 1; }
    58. 

  58.         .star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { color: #FFD700; text-shadow: 0 0 15px rgba(255, 215, 0, 0.7); transform: scale(1.15); }
    59. 

  59. 

  60.         /* ГЛОБАЛЬНЫЙ RIPPLE ЭФФЕКТ (КРУГИ ПО ВОДЕ) */
    61. 

  61.         .global-ripple { position: fixed; border-radius: 50%; border: 2.5px solid var(--accent); transform: translate(-50%, -50%); pointer-events: none; animation: rippleAnim 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; z-index: 9999999; box-shadow: 0 0 15px var(--btn-glow); }
    62. 

  62.         @keyframes rippleAnim { 0% { width: 0; height: 0; opacity: 1; border-width: 4px; } 100% { width: 120px; height: 120px; opacity: 0; border-width: 1px; } }
    63. 

  63. 

  64.         /* ВОЛНОВЫЕ КНОПКИ С КОНТРАСТОМ ДЛЯ ПАНЕЛЕЙ */
    65. 

  65.         .btn, .btn-enter, .premium-link-btn, .lang-btn, .step-btn, 
    66. 

  66.         .accordion-btn, .formula-card, .menu-btn-special, 
    67. 

  67.         .btn-test-special, .btn-reload-styled, .file-upload-btn, 
    68. 

  68.         .glass-controls button, .quiz-option, .tab, .btn-submit-main, 
    69. 

  69.         .btn-tzi, .quiz-nav-btn {
    70. 

  70.             border-radius: var(--wave-btn-radius) !important;
    71. 

  71.             transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    72. 

  72.             border: 2px solid rgba(255,255,255,0.7) !important;
    73. 

  73.             text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    74. 

  74.         }
    75. 

  75. 

  76.         .btn:hover, .btn-enter:hover, .premium-link-btn:hover, .lang-btn:hover, 
    77. 

  77.         .step-btn:hover, .accordion-btn:hover, .formula-card:hover, 
    78. 

  78.         .menu-btn-special:hover, .btn-test-special:hover, .btn-reload-styled:hover, 
    79. 

  79.         .file-upload-btn:hover, .glass-controls button:hover, .quiz-option:hover, 
    80. 

  80.         .tab:hover, .btn-submit-main:hover, .btn-tzi:hover, .quiz-nav-btn:hover {
    81. 

  81.             border-radius: var(--wave-btn-hover) !important;
    82. 

  82.             transform: translateY(-3px); box-shadow: 0 8px 20px var(--btn-glow);
    83. 

  83.         }
    84. 

  84. 

  85.         .btn-pause, .btn-medium, .premium-link-btn[style*="FF9800"] {
    86. 

  86.             background: linear-gradient(135deg, #FF6F00, #E64A19) !important;
    87. 

  87.             color: #ffffff !important; border: 2px solid rgba(255, 255, 255, 0.85) !important;
    88. 

  88.             box-shadow: 0 4px 14px rgba(230, 74, 25, 0.45) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    89. 

  89.         }
    90. 

  90. 

  91.         .btn-pause.active { background: linear-gradient(135deg, #D81B60, #AD1457) !important; border-color: #ffffff !important; box-shadow: 0 0 18px rgba(216, 27, 96, 0.7) !important; }
    92. 

  92. 

  93.         .premium-link-btn.foxford-btn {
    94. 

  94.             background: linear-gradient(135deg, #FF6D00, #DD2C00) !important; color: #ffffff !important; border: 2px solid #ffffff !important;
    95. 

  95.             box-shadow: 0 4px 15px rgba(221, 44, 0, 0.5) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
    96. 

  96.         }
    97. 

  97. 

  98.         /* УНИКАЛЬНАЯ КНОПКА КАМЕРЫ (СНИМОК) С ИНТЕРАКТИВОМ */
    99. 

  99.         .btn-camera-snap {
    100. 

  100.             display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 18px; font-size: 13px; font-weight: 900; cursor: pointer;
    101. 

  101.             background: linear-gradient(135deg, #651FFF, #3D5AFE) !important; color: #fff !important; border: 2px solid #fff !important;
    102. 

  102.             border-radius: 24px 6px 24px 6px !important; box-shadow: 0 4px 15px rgba(101, 31, 255, 0.4) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    103. 

  103.             transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: visible; z-index: 10;
    104. 

  104.         }
    105. 

  105.         .btn-camera-snap:hover { border-radius: 6px 24px 6px 24px !important; transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(101, 31, 255, 0.6) !important; }
    106. 

  106.         .btn-camera-snap:active { transform: scale(0.9); }
    107. 

  107.         
    108. 

  108.         .camera-flash-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; z-index: 10; opacity: 0; pointer-events: none; border-radius: 12px; }
    109. 

  109.         @keyframes flashAnim { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }
    110. 

  110. 

  111.         #bg-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at 10% 20%, rgba(156, 39, 176, 0.08), transparent 40%), radial-gradient(circle at 90% 80%, rgba(33, 150, 243, 0.08), transparent 40%), linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px; background-color: var(--bg-color); z-index: -2; transition: filter 0.4s ease, background-image 0.4s ease; }
    112. 

  112.         .gradient-text { animation: colorFlow 6s ease infinite; font-weight: bold; }
    113. 

  113.         @keyframes colorFlow { 0% { color: #ff00cc; } 50% { color: #3333ff; } 100% { color: #ff00cc; } }
    114. 

  114. 

  115.         .glass-panel { background: rgba(var(--panel-rgb), var(--glass-alpha)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1.5px solid var(--glass-border); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
    116. 

  116.         .glass-element { position: relative; overflow: hidden; background: rgba(var(--panel-rgb), calc(var(--glass-alpha) - 0.15)); border: 1.5px solid var(--element-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.2s ease, box-shadow 0.2s ease, border-radius 0.3s ease; color: var(--text-color); cursor: pointer; user-select: none; }
    117. 

  117.         .btn-shine::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); pointer-events: none; animation: shine 4.5s infinite; }
    118. 

  118.         @keyframes shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
    119. 

  119. 

  120.         #global-tooltip { position: fixed; top: 0; left: 0; z-index: 999999; background: linear-gradient(135deg, rgba(20, 20, 30, 0.98), rgba(40, 20, 40, 0.98)); color: #fff; padding: 14px 18px; border-radius: var(--wave-btn-radius); font-size: 13.5px; max-width: 290px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.15s ease-out; border: 2px solid var(--accent); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); line-height: 1.5; text-align: center; font-weight: 500; transform: scale(0.95); }
    121. 

  121.         .hint-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #FFC107; color: #000; font-size: 12px; font-weight: bold; cursor: help; margin-left: 6px; vertical-align: middle; box-shadow: 0 0 10px rgba(255, 193, 7, 0.6); transition: 0.2s; border: 1.5px solid #fff; }
    122. 

  122.         .hint-icon:hover { transform: scale(1.2); filter: brightness(1.1); box-shadow: 0 0 15px rgba(255, 193, 7, 0.9); }
    123. 

  123.         .pulse-alert { animation: pulseAlert 1.5s infinite; }
    124. 

  124.         @keyframes pulseAlert { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.15); filter: brightness(1.2); } 100% { transform: scale(1); filter: brightness(1); } }
    125. 

  125. 

  126.         @media (hover: hover) and (pointer: fine) {
    127. 

  127.             .glass-element:hover { background: rgba(var(--panel-rgb), calc(var(--glass-alpha) - 0.05)); border-color: var(--accent); box-shadow: 0 6px 16px var(--btn-glow); }
    128. 

  128.             .accordion-btn:hover { background: var(--accent); color: white; padding-left: 22px; }
    129. 

  129.             .info-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 15px 35px var(--btn-glow); border-color: var(--accent); z-index: 5; }
    130. 

  130.             .btn-enter:hover { transform: translateY(-4px) scale(1.04) !important; box-shadow: 0 15px 40px var(--btn-glow) !important; }
    131. 

  131.             .interactive-hover:hover { box-shadow: 0 8px 25px var(--btn-glow); }
    132. 

  132.         }
    133. 

  133. 

  134.         .glass-element:active { transform: scale(0.96) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; }
    135. 

  135.         .btn-enter { position: relative; z-index: 10; padding: 16px 44px; font-size: 22px; font-weight: bold; color: #fff !important; background: linear-gradient(135deg, var(--accent), #ff00cc) !important; border: 2px solid rgba(255, 255, 255, 0.9) !important; border-radius: 35px; box-shadow: 0 0 25px var(--btn-glow); cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); outline: none; }
    136. 

  136.         .btn-enter:active { transform: scale(0.96) !important; }
    137. 

  137. 

  138.         .top-bar-wrapper { display: none; position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; padding: max(10px, env(safe-area-inset-top)) 10px 10px; pointer-events: none; justify-content: center; }
    139. 

  139.         .top-bar { pointer-events: auto; display: inline-flex; align-items: center; gap: clamp(6px, 1.5vw, 12px); padding: 8px 16px; border-radius: 35px; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3); background: rgba(var(--panel-rgb), 0.98); border: 2px solid var(--accent); position: relative; }
    140. 

  140.         
    141. 

  141.         .nav-logo { font-size: clamp(16px, 3.5vw, 20px); display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-weight: 900; background: transparent !important; border: none !important; cursor: pointer; }
    142. 

  142.         .nav-logo .logo-super-shape.small { width: 36px; height: 36px; animation: morphRing 3s ease-in-out infinite alternate, ringGlow 2s infinite alternate; }
    143. 

  143. 

  144.         .menu-btn-special { font-size: clamp(13px, 2vw, 15px); font-weight: 900; background: linear-gradient(135deg, #7B1FA2, #E91E63) !important; color: white !important; cursor: pointer; padding: 10px 22px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(123, 31, 162, 0.45) !important; }
    145. 

  145.         .btn-test-special { font-size: clamp(13px, 2vw, 15px); font-weight: 900; background: linear-gradient(135deg, #FF5722, #C2185B) !important; color: white !important; cursor: pointer; padding: 10px 18px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(233, 30, 99, 0.45) !important; position: relative; }
    146. 

  146.         .btn-reload-styled { font-size: clamp(13px, 2vw, 15px); font-weight: 900; background: linear-gradient(135deg, #0091EA, #0052cc) !important; color: white !important; cursor: pointer; padding: 10px 16px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(0, 145, 234, 0.45) !important; }
    147. 

  147.         .btn-fullscreen-compact { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: rgba(var(--panel-rgb), 0.9); border: 2px solid var(--border-color) !important; color: var(--text-color); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    148. 

  148. 

  149.         .lang-btn { flex: 1; padding: 10px; font-weight: bold; cursor: pointer; color: var(--text-color); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; background: rgba(var(--panel-rgb), 0.85); border: 1.5px solid var(--border-color) !important; }
    150. 

  150.         .lang-btn.active { border-color: var(--accent) !important; background: var(--accent) !important; color: white; box-shadow: 0 0 16px var(--btn-glow); text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
    151. 

  151. 

  152.         .logo-super-shape { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; padding: 6px; background: linear-gradient(135deg, var(--accent), #ff00cc, #00d4ff, var(--accent-alt)); background-size: 300% 300%; border-radius: 32% 68% 65% 35% / 40% 35% 65% 60%; animation: morphRing 5s ease-in-out infinite alternate, ringGlow 3s infinite alternate; margin-bottom: 10px; }
    153. 

  153.         .logo-super-shape.small { width: 32px; height: 32px; padding: 2px; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; margin-bottom: 0; }
    154. 

  154.         .logo-inner-content { background: var(--bg-color); border-radius: inherit; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3); }
    155. 

  155. 

  156.         @keyframes morphRing { 0% { border-radius: 32% 68% 65% 35% / 40% 35% 65% 60%; } 50% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 100% { border-radius: 40% 60% 70% 30% / 40% 60% 40% 60%; } }
    157. 

  157.         @keyframes ringGlow { 0% { box-shadow: 0 0 15px var(--btn-glow); } 100% { box-shadow: 0 0 35px var(--accent); } }
    158. 

  158. 

  159.         #welcome-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(circle at center, rgba(156, 39, 176, 0.1) 0%, var(--bg-color) 100%); z-index: 9000; transition: opacity 0.35s ease; padding: 20px; text-align: center; }
    160. 

  160.         .welcome-orb { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; opacity: 0.6; animation: floatOrb 10s infinite alternate ease-in-out; pointer-events: none; }
    161. 

  161.         .orb-1 { width: 50vmin; height: 50vmin; background: var(--accent); top: -5%; left: -5%; }
    162. 

  162.         .orb-2 { width: 40vmin; height: 40vmin; background: var(--base-wave); bottom: -5%; right: -5%; animation-delay: -3s; }
    163. 

  163.         @keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 50px) scale(1.1); } }
    164. 

  164.         .app-title { font-size: clamp(34px, 8vw, 64px); margin: 20px 0 5px; line-height: 1.2; letter-spacing: 1px; }
    165. 

  165.         .app-subtitle { font-size: clamp(14px, 3.5vw, 18px); color: var(--text-color); margin-bottom: 35px; opacity: 0.85; max-width: 600px; font-weight: 500; }
    166. 

  166. 

  167.         #main-app { display: none; width: 100%; max-width: 1300px; margin: 0 auto; padding: calc(max(10px, env(safe-area-inset-top)) + 80px) 14px 40px; flex-direction: column; }
    168. 

  168.         #sidebar { position: fixed; left: -360px; top: 0; width: 320px; max-width: 85%; height: 100vh; z-index: 3000; transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); padding: max(20px, env(safe-area-inset-top)) 20px 30px; overflow-y: auto; display: flex; flex-direction: column; border-right: 2px solid var(--accent); }
    169. 

  169.         #sidebar.open { left: 0; }
    170. 

  170.         #sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 1999; backdrop-filter: blur(4px); }
    171. 

  171.         #sidebar-overlay.show { display: block; }
    172. 

  172.         
    173. 

  173.         .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
    174. 

  174.         .sidebar-header h2 .emoji-fix { display: inline-block; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
    175. 

  175.         .sidebar-header:hover h2 .emoji-fix { transform: rotate(180deg) scale(1.2); }
    176. 

  176.         .close-sidebar { font-size: 34px; cursor: pointer; color: var(--text-color); transition: 0.2s; padding: 5px; }
    177. 

  177.         .close-sidebar:hover { color: var(--accent); transform: scale(1.1); }
    178. 

  178.         
    179. 

  179.         .sidebar-section { margin-bottom: 20px; }
    180. 

  180.         .sidebar-title { font-size: 13px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; font-weight: bold; letter-spacing: 0.5px; }
    181. 

  181.         
    182. 

  182.         /* ИНТЕРАКТИВНЫЕ КНОПКИ МЕНЮ С ЭФФЕКТОМ ЗАЛИВКИ */
    183. 

  183.         .sidebar-btn-asym { 
    184. 

  184.             padding: 12px 16px; margin-bottom: 8px; font-weight: bold; display: flex; align-items: center; gap: 10px; 
    185. 

  185.             font-size: 14px; border-left: 4px solid var(--accent); cursor: pointer; 
    186. 

  186.             transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; z-index: 1;
    187. 

  187.         }
    188. 

  188.         .sidebar-btn-asym::before {
    189. 

  189.             content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    190. 

  190.             background: linear-gradient(90deg, transparent, var(--accent)); transition: all 0.4s ease; z-index: -1;
    191. 

  191.         }
    192. 

  192.         .sidebar-btn-asym:hover { transform: translateX(8px) scale(1.02); color: white; border-color: white; box-shadow: 0 4px 15px var(--btn-glow); }
    193. 

  193.         .sidebar-btn-asym:hover::before { left: 0; }
    194. 

  194.         
    195. 

  195.         .setting-block { margin-bottom: 15px; }
    196. 

  196.         .setting-block label { display: block; margin-bottom: 6px; font-weight: bold; font-size: 14px; }
    197. 

  197.         .setting-block select { width: 100%; padding: 10px; border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; border: 1.5px solid var(--element-border); background: rgba(var(--panel-rgb), 0.95); color: var(--text-color); font-weight: bold; transition: 0.3s; cursor: pointer; }
    198. 

  198.         .setting-block select:hover { border-color: var(--accent); box-shadow: 0 0 10px var(--btn-glow); }
    199. 

  199. 

  200.         .file-upload-wrapper { position: relative; overflow: hidden; display: block; margin-bottom: 8px; }
    201. 

  201.         .file-upload-input { position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; z-index: 2; }
    202. 

  202.         .file-upload-btn { background: rgba(var(--panel-rgb), 0.9); border: 2px dashed var(--accent) !important; color: var(--text-color); padding: 11px; text-align: center; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; }
    203. 

  203.         
    204. 

  204.         .glass-controls { display: flex; gap: 6px; margin-bottom: 10px; }
    205. 

  205.         .glass-controls button { flex: 1; padding: 9px; font-size: 13px; font-weight: 800; cursor: pointer; border: 1.5px solid var(--element-border) !important; background: rgba(var(--panel-rgb), 0.9); color: var(--text-color); }
    206. 

  206.         .btn-glass-on.active { background: var(--accent) !important; color: white !important; border-color: #fff !important; box-shadow: 0 0 12px var(--btn-glow) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
    207. 

  207.         
    208. 

  208.         .btn-tzi { background: var(--tzi-color) !important; color: #000 !important; border: 2px solid #fff !important; box-shadow: 0 0 16px var(--tzi-glow); font-weight: 900; position: relative; }
    209. 

  209.         input[type=range] { width: 100%; margin-top: 5px; accent-color: var(--accent); cursor: pointer; transition: 0.2s; }
    210. 

  210.         input[type=range]:hover { transform: scale(1.02); filter: brightness(1.2); }
    211. 

  211. 

  212.         .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 75vh; margin-bottom: 30px; }
    213. 

  213.         .panel { padding: 16px; background: rgba(var(--panel-rgb), 0.85); border: 1px solid var(--border-color); display: flex; flex-direction: column; min-height: 0; position: relative; border-radius: 16px; }
    214. 

  214.         .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0; flex-wrap: wrap; gap: 8px; }
    215. 

  215.         
    216. 

  216.         /* 3D ИНТЕРАКТИВ ДЛЯ ГРАФИКОВ */
    217. 

  217.         .canvas-wrapper { flex-grow: 1; position: relative; width: 100%; height: 260px; min-height: 160px; resize: both; overflow: hidden; border-radius: 12px; border: 2px solid var(--element-border); background: var(--canvas-bg); transition: transform 0.3s ease, box-shadow 0.3s ease; }
    218. 

  218.         .canvas-wrapper:hover { transform: scale(1.01); box-shadow: 0 12px 35px var(--btn-glow); z-index: 10; border-color: var(--accent); }
    219. 

  219.         canvas { display: block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
    220. 

  220. 

  221.         .chart-telemetry { position: absolute; bottom: 8px; left: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
    222. 

  222.         .chart-telemetry.hidden { display: none; }
    223. 

  223.         .telemetry-chip { background: rgba(var(--panel-rgb), 0.96); border: 1.5px solid var(--element-border); padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; transition: 0.3s; }
    224. 

  224.         .telemetry-chip .val-highlight { color: var(--accent); font-weight: 900; font-size: 13px; }
    225. 

  225.         .telemetry-chip .val-fixed { display: inline-block; min-width: 42px; text-align: right; }
    226. 

  226. 

  227.         .tabs { display: flex; gap: 8px; margin: 8px 0; flex-shrink: 0; width: 100%; }
    228. 

  228.         .tab { padding: 9px 12px; flex: 1; text-align: center; font-weight: 900; font-size: 15px; cursor: pointer; border: 2px solid var(--element-border) !important; background: rgba(var(--panel-rgb), 0.85); color: var(--text-color); }
    229. 

  229.         .tab.active { background: var(--accent) !important; color: #fff !important; border-color: #fff !important; transform: scale(1.02); box-shadow: 0 4px 14px var(--btn-glow); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
    230. 

  230. 

  231.         .presets-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; width: 100%; }
    232. 

  232.         .presets-row button { padding: 9px 4px; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; min-width: 0; text-align: center; border: 1.5px solid var(--element-border) !important; background: rgba(var(--panel-rgb), 0.85); color: var(--text-color); transition: 0.2s; }
    233. 

  233.         .presets-row button.active { background: var(--accent) !important; color: #fff !important; border-color: #fff !important; box-shadow: 0 0 12px var(--btn-glow) !important; transform: scale(1.03); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
    234. 

  234. 

  235.         .control-row { margin-bottom: 11px; display: flex; align-items: center; flex-shrink: 0; gap: 10px; width: 100%; }
    236. 

  236.         .control-label { width: 135px; font-weight: bold; font-size: 14px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; }
    237. 

  237.         .control-body { display: flex; align-items: center; flex-grow: 1; gap: 10px; width: 100%; }
    238. 

  238.         
    239. 

  239.         .secondary-params { background: rgba(var(--panel-rgb), 0.5); border: 2px dashed var(--element-border); border-radius: 14px; padding: 12px; margin-top: 8px; }
    240. 

  240.         .step-toggle { display: flex; background: rgba(var(--panel-rgb), 0.8); border-radius: 12px; padding: 4px; border: 1.5px solid var(--element-border); flex-grow: 1; }
    241. 

  241.         .step-btn { flex: 1; padding: 6px 12px; text-align: center; font-size: 14px; font-weight: 800; cursor: pointer; color: var(--text-color); transition: 0.3s; }
    242. 

  242.         .step-btn.active { background: var(--accent); color: white; box-shadow: 0 2px 8px var(--btn-glow); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
    243. 

  243. 

  244.         .input-wrapper { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
    245. 

  245.         .value-input { width: 80px; padding: 6px; border-radius: 8px; border: 2px solid var(--accent); font-weight: 900; font-size: 15px; text-align: center; outline: none; background: var(--badge-bg); color: var(--accent); font-family: monospace; transition: all 0.25s ease; }
    246. 

  246.         .value-input:focus { box-shadow: 0 0 15px var(--btn-glow); background: rgba(var(--panel-rgb), 0.98); transform: scale(1.08); border-color: var(--accent-alt); color: var(--accent-alt); }
    247. 

  247. 

  248.         .slider-alt { accent-color: var(--accent-alt) !important; }
    249. 

  249.         .input-alt { border-color: var(--accent-alt) !important; color: var(--accent-alt) !important; background: rgba(230, 74, 25, 0.12) !important; }
    250. 

  250. 

  251.         .btn-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    252. 

  252.         .btn { padding: 11px 14px; font-weight: 900; color: white; flex-grow: 1; text-align: center; font-family: inherit; font-size: 14px; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.85) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
    253. 

  253.         .btn-audio { background: linear-gradient(135deg, #0288D1, #01579B) !important; box-shadow: 0 4px 12px rgba(2, 136, 209, 0.4) !important; }
    254. 

  254.         .btn-audio.active { background: linear-gradient(135deg, #2E7D32, #1B5E20) !important; border-color: #A5D6A7 !important; box-shadow: 0 0 16px rgba(46, 125, 50, 0.7) !important; }
    255. 

  255.         .btn-dist { background: linear-gradient(135deg, #8E24AA, #4A148C) !important; box-shadow: 0 4px 12px rgba(142, 36, 170, 0.4) !important; }
    256. 

  256.         .btn-dist.active { background: linear-gradient(135deg, #D50000, #B71C1C) !important; border-color: #FF8A80 !important; box-shadow: 0 0 16px rgba(213, 0, 0, 0.7) !important; }
    257. 

  257.         .btn-reset { background: linear-gradient(135deg, #546E7A, #37474F) !important; box-shadow: 0 4px 12px rgba(84, 110, 122, 0.4) !important; }
    258. 

  258. 

  259.         .site-content { padding: 35px; border-radius: 20px; margin-bottom: 30px; background: var(--content-bg); border: 2px solid var(--border-color); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); }
    260. 

  260.         .content-header { text-align: center; margin-bottom: 35px; font-size: clamp(22px, 5vw, 28px); font-weight: 800; }
    261. 

  261.         .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
    262. 

  262.         .info-card { padding: 22px; background: rgba(var(--panel-rgb), 0.85); border: 2px solid var(--border-color); border-radius: 16px; }
    263. 

  263.         .info-card h3 { color: var(--accent); margin-top: 0; font-size: 18px; font-weight: 900; }
    264. 

  264.         .info-card p { line-height: 1.6; font-size: 15px; margin-bottom: 0; }
    265. 

  265.         .key-term { font-weight: 800; letter-spacing: 0.5px; color: var(--accent); text-decoration: underline dotted; }
    266. 

  266.         .faq-link { color: var(--base-wave); text-decoration: none; font-weight: bold; transition: color 0.2s; display: inline-block; margin-top: 6px; }
    267. 

  267.         .faq-link:hover { color: var(--accent); text-decoration: underline; }
    268. 

  268. 

  269.         .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
    270. 

  270.         .wave-calculator { background: #111119; border: 2.5px solid #2a2a38; padding: 22px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); color: #fff; transition: 0.4s; }
    271. 

  271.         .wave-calculator:hover { transform: translateY(-5px); border-color: #00E676; box-shadow: 0 15px 40px rgba(0, 230, 118, 0.2); }
    272. 

  272.         .calc-screen { background: #051007 !important; border: 2px solid #1b5e20; border-radius: 12px; padding: 16px; box-shadow: inset 0 0 15px rgba(0, 230, 118, 0.15); margin-bottom: 15px; transition: 0.3s; }
    273. 

  273.         .calc-formula { font-family: 'Courier New', monospace; font-size: 18px; color: #81c784; margin-bottom: 8px; font-weight: bold; }
    274. 

  274.         .calc-result { font-family: 'Courier New', monospace; font-size: 26px; font-weight: 900; color: #00E676; text-shadow: 0 0 10px rgba(0, 230, 118, 0.7); margin-top: 5px; }
    275. 

  275.         .calc-controls { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
    276. 

  276.         .calc-input { font-size: 16px; padding: 8px; width: 110px; text-align: center; border-radius: 8px; border: 2px solid #444; background: #0a0a10 !important; color: #00E676 !important; font-weight: 900; outline: none; font-family: 'Courier New', monospace; transition: all 0.3s; }
    277. 

  277.         .calc-input:focus { border-color: #00E676; box-shadow: 0 0 15px rgba(0, 230, 118, 0.5); transform: scale(1.08); }
    278. 

  278.         .calc-select { font-size: 14px; padding: 6px; border-radius: 8px; border: 2px solid #444; background: #0a0a10; color: #00E676; font-weight: bold; outline: none; font-family: 'Courier New', monospace; cursor: pointer; transition: 0.3s; max-width: 150px; }
    279. 

  279.         .calc-select:focus { border-color: #00E676; box-shadow: 0 0 15px rgba(0,230,118,0.5); }
    280. 

  280. 

  281.         .accordion { width: 100%; margin-top: 15px; }
    282. 

  282.         .accordion-btn { background: rgba(var(--panel-rgb), 0.95); color: var(--text-color); cursor: pointer; padding: 16px 22px; width: 100%; border: 2px solid var(--border-color); text-align: left; outline: none; font-size: 16px; font-weight: bold; display: flex; justify-content: space-between; margin-bottom: 8px; position: relative; overflow: hidden; z-index: 1;}
    283. 

  283.         .accordion-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(156, 39, 176, 0.2)); transition: all 0.4s ease; z-index: -1; }
    284. 

  284.         .accordion-btn:hover::before { left: 0; }
    285. 

  285.         .accordion-btn.active { background: var(--accent); color: #fff; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
    286. 

  286.         .accordion-content { padding: 0 22px; background: rgba(var(--panel-rgb), 0.85); max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-bottom: 8px; }
    287. 

  287.         .accordion-content p { padding: 16px 0; line-height: 1.6; margin: 0; font-size: 15px; }
    288. 

  288. 

  289.         .resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; }
    290. 

  290.         .premium-link-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; font-weight: 900; font-size: 14px; color: #fff !important; text-decoration: none; font-family: inherit; border: 2px solid rgba(255, 255, 255, 0.7) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
    291. 

  291.         .premium-link-btn.sim-btn { background: linear-gradient(135deg, #00C853, #00796B); }
    292. 

  292.         .premium-link-btn.wiki-btn { background: linear-gradient(135deg, #1976D2, #0D47A1); }
    293. 

  293.         .premium-link-btn.youtube-btn { background: linear-gradient(135deg, #E53935, #B71C1C); }
    294. 

  294.         .premium-link-btn.ru-btn { background: linear-gradient(135deg, #303F9F, #1A237E); }
    295. 

  295.         .premium-link-btn.rutube-btn { background: linear-gradient(135deg, #111, #222); border-color: #00D1FF !important; }
    296. 

  296. 

  297.         .app-footer { text-align: center; font-size: 13px; opacity: 0.85; padding: 25px 15px 40px; border-top: 1.5px solid var(--border-color); font-weight: bold; margin-top: 20px; }
    298. 

  298. 

  299.         .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.75); z-index: 3500; justify-content: center; align-items: center; padding: 12px; backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.3s ease; }
    300. 

  300.         .modal-overlay.show { opacity: 1; display: flex; }
    301. 

  301.         .modal-content { padding: 28px; border-radius: 22px; width: 100%; max-width: 800px; max-height: 85vh; overflow-y: auto; position: relative; border: 2.5px solid var(--accent); }
    302. 

  302.         .close-btn { position: absolute; top: 12px; right: 15px; font-size: 30px; cursor: pointer; color: var(--text-color); padding: 4px; z-index: 10; transition: transform 0.2s; font-weight: bold; }
    303. 

  303.         .close-btn:hover { transform: scale(1.15) rotate(90deg); color: var(--accent); }
    304. 

  304. 

  305.         .about-section { background: rgba(var(--panel-rgb), 0.8); border: 1.5px solid var(--border-color); padding: 20px; margin-bottom: 18px; border-radius: 16px; }
    306. 

  306.         .about-section h3 { margin-top: 0; color: var(--accent); display: flex; align-items: center; gap: 10px; font-size: 18px; }
    307. 

  307.         .about-section p { line-height: 1.6; font-size: 15px; margin-bottom: 0; }
    308. 

  308.         
    309. 

  309.         /* КРАСИВЫЙ ЖУРНАЛ ИЗМЕНЕНИЙ (CHANGELOG) */
    310. 

  310.         .timeline { border-left: 3px solid var(--accent); padding-left: 18px; margin-left: 10px; position: relative; margin-top: 15px; }
    311. 

  311.         .timeline-item { position: relative; margin-bottom: 22px; font-size: 14px; line-height: 1.6; background: rgba(var(--panel-rgb), 0.6); padding: 15px; border-radius: 10px; border: 1.5px solid var(--border-color); transition: 0.3s; }
    312. 

  312.         .timeline-item:hover { background: rgba(var(--panel-rgb), 0.95); transform: translateX(8px) scale(1.01); box-shadow: 0 8px 25px var(--btn-glow); border-color: var(--accent); }
    313. 

  313.         .timeline-item::before { content: ''; position: absolute; left: -26px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-color); box-shadow: 0 0 10px var(--btn-glow); transition: 0.3s; }
    314. 

  314.         .timeline-item:hover::before { transform: scale(1.3); background: #fff; border-color: var(--accent); }
    315. 

  315.         .timeline-item h4 { color: var(--accent); display: block; font-size: 16px; margin: 0 0 8px 0; font-weight: 900; }
    316. 

  316.         .timeline-item ul { margin: 0; padding-left: 20px; color: var(--text-color); font-weight: 500; list-style-type: none; }
    317. 

  317.         .timeline-item ul li { margin-bottom: 5px; position: relative; }
    318. 

  318.         .timeline-item ul li::before { content: "🔹"; position: absolute; left: -22px; font-size: 12px; top: 2px; }
    319. 

  319. 

  320.         .formula-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
    321. 

  321.         @media (min-width: 600px) { .formula-grid { grid-template-columns: 1fr 1fr; } }
    322. 

  322.         .formula-card { padding: 14px 18px; font-size: 14px; line-height: 1.6; border-left: 4px solid var(--accent); background: rgba(var(--panel-rgb), 0.8); font-family: monospace; font-weight: bold; border-radius: 12px; transition: 0.3s; }
    323. 

  323.         .formula-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 25px var(--btn-glow); border-color: var(--accent); z-index: 2; }
    324. 

  324.         .formula-card b { display: block; color: var(--accent); margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; font-family: -apple-system, sans-serif; }
    325. 

  325. 

  326.         /* ИНТЕРАКТИВНЫЕ ТЕСТЫ И СЛАЙДЕР С SVG АНИМАЦИЕЙ */
    327. 

  327.         .quiz-timer-pill { position: sticky; top: -10px; z-index: 100; width: 100%; max-width: 440px; margin: 0 auto 20px auto; background: rgba(15, 15, 25, 0.95); border: 2px solid var(--accent); border-radius: 40px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); backdrop-filter: blur(14px); display: flex; flex-direction: column; overflow: hidden; }
    328. 

  328.         .timer-progress-bg { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.12); position: relative; }
    329. 

  329.         .timer-progress-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #00E676 0%, #00B0FF 100%); box-shadow: 0 0 12px rgba(0, 230, 118, 0.6); transition: width 1s linear, background 0.4s ease, box-shadow 0.4s ease; }
    330. 

  330.         .timer-content { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 20px; position: relative; z-index: 2; }
    331. 

  331.         .timer-display { color: #00E676; font-size: 22px; font-weight: bold; font-family: monospace; letter-spacing: 1px; transition: color 0.3s; text-shadow: 0 0 10px rgba(0, 230, 118, 0.5); }
    332. 

  332.         .timer-orange { color: #FF9800 !important; text-shadow: 0 0 10px rgba(255, 152, 0, 0.6); }
    333. 

  333.         .timer-red-blink { color: #f44336 !important; animation: timerBlink 1s infinite; text-shadow: 0 0 15px rgba(244, 67, 54, 0.8); }
    334. 

  334. 

  335.         @keyframes timerBlink { 0%, 100% { opacity: 1; text-shadow: 0 0 18px rgba(244, 67, 54, 0.9); } 50% { opacity: 0.5; text-shadow: 0 0 6px rgba(244, 67, 54, 0.4); } }
    336. 

  336. 

  337.         .test-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 25px; }
    338. 

  338.         .test-modes .btn { font-size: 15px; padding: 16px 10px; color: #ffffff !important; font-weight: 900; text-align: center; border: 2px solid rgba(255, 255, 255, 0.8) !important; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s ease !important; }
    339. 

  339.         .btn-easy { background: linear-gradient(135deg, #4CAF50, #2E7D32) !important; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3) !important; }
    340. 

  340.         .btn-easy:hover { box-shadow: 0 0 25px rgba(76, 175, 80, 0.9) !important; border-color: #fff !important; filter: brightness(1.15); transform: translateY(-3px) scale(1.02); }
    341. 

  341.         .btn-medium { background: linear-gradient(135deg, #FF9800, #EF6C00) !important; box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3) !important; }
    342. 

  342.         .btn-medium:hover { box-shadow: 0 0 25px rgba(255, 152, 0, 0.9) !important; border-color: #fff !important; filter: brightness(1.15); transform: translateY(-3px) scale(1.02); }
    343. 

  343.         .btn-hard { background: linear-gradient(135deg, #F44336, #C62828) !important; box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3) !important; }
    344. 

  344.         .btn-hard:hover { box-shadow: 0 0 25px rgba(244, 67, 54, 0.9) !important; border-color: #fff !important; filter: brightness(1.15); transform: translateY(-3px) scale(1.02); }
    345. 

  345.         .btn-ultra { background: linear-gradient(135deg, #9C27B0, #E91E63) !important; border: 2.5px solid #FF80AB !important; box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3) !important; }
    346. 

  346.         .btn-ultra:hover { box-shadow: 0 0 25px rgba(233, 30, 99, 0.9) !important; border-color: #fff !important; filter: brightness(1.15); transform: translateY(-3px) scale(1.02); }
    347. 

  347. 

  348.         .question-card-wrapper { margin-top: 10px; min-height: 250px; }
    349. 

  349.         .question { margin-bottom: 20px; padding: 24px; background: rgba(var(--panel-rgb), 0.85); border: 2px solid var(--border-color); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); border-radius: var(--wave-btn-radius); animation: fadeInUp 0.4s ease-out forwards; }
    350. 

  350.         
    351. 

  351.         @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    352. 

  352. 

  353.         .question-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-weight: 900; font-size: 15px; color: var(--accent); }
    354. 

  354.         .question p { font-weight: bold; margin-top: 0; margin-bottom: 20px; font-size: 18px; line-height: 1.5; color: var(--text-color); }
    355. 

  355. 

  356.         .quiz-option { display: flex; align-items: center; padding: 16px 20px; margin-bottom: 12px; font-size: 16px; cursor: pointer; border: 2px solid var(--element-border); background: rgba(var(--panel-rgb), 0.9); transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; font-weight: bold; }
    357. 

  357.         .quiz-option input { display: none; }
    358. 

  358.         .custom-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); margin-right: 14px; position: relative; flex-shrink: 0; transition: 0.2s; }
    359. 

  359.         .quiz-option.selected { border-color: var(--accent); background: rgba(156, 39, 176, 0.15); transform: scale(1.03); box-shadow: 0 8px 20px rgba(156, 39, 176, 0.3); border-radius: var(--wave-btn-hover) !important; z-index: 2;}
    360. 

  360.         .quiz-option.selected .custom-radio { border-color: var(--accent); box-shadow: 0 0 15px var(--btn-glow); }
    361. 

  361.         .quiz-option.selected .custom-radio::after { content: ''; position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; }
    362. 

  362.         .quiz-option.selected .option-text { color: var(--accent); }
    363. 

  363. 

  364.         .quiz-option.correct-answer { background: rgba(76, 175, 80, 0.22) !important; border-color: #4CAF50 !important; color: #1B5E20 !important; box-shadow: 0 0 14px rgba(76, 175, 80, 0.4); transform: scale(1.02); }
    365. 

  365.         .quiz-option.correct-answer::after { content: '✔'; position: absolute; right: 16px; color: #2E7D32; font-size: 20px; font-weight: 900; }
    366. 

  366.         .quiz-option.wrong-answer { background: rgba(244, 67, 54, 0.22) !important; border-color: #f44336 !important; color: #B71C1C !important; box-shadow: 0 0 14px rgba(244, 67, 54, 0.4); transform: scale(1.02); }
    367. 

  367.         .quiz-option.wrong-answer::after { content: '✖'; position: absolute; right: 16px; color: #C62828; font-size: 20px; font-weight: 900; }
    368. 

  368. 

  369.         .quiz-nav-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; }
    370. 

  370.         .quiz-nav-btn { padding: 12px 24px; font-weight: 900; font-size: 15px; cursor: pointer; border: 2px solid var(--accent); background: rgba(var(--panel-rgb), 0.95); color: var(--text-color); }
    371. 

  371.         .quiz-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
    372. 

  372. 

  373.         #test-result-screen { display: none; text-align: center; padding: 15px 5px; }
    374. 

  374.         
    375. 

  375.         .score-circle-wrapper { position: relative; width: 140px; height: 140px; margin: 0 auto 20px auto; }
    376. 

  376.         .circular-progress { transform: rotate(-90deg); width: 140px; height: 140px; filter: drop-shadow(0 0 10px var(--accent)); transition: filter 0.5s; }
    377. 

  377.         .circular-progress circle { fill: none; stroke-width: 10; stroke-linecap: round; }
    378. 

  378.         .circular-progress .bg { stroke: rgba(var(--panel-rgb), 0.5); }
    379. 

  379.         .circular-progress .progress { stroke: var(--accent); stroke-dasharray: 339.292; stroke-dashoffset: 339.292; transition: stroke-dashoffset 1s ease-out, stroke 0.5s; }
    380. 

  380.         .score-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; color: var(--accent); transition: color 0.5s; }
    381. 

  381. 

  382.         .review-box { margin-top: 20px; text-align: left; max-height: 300px; overflow-y: auto; background: rgba(var(--panel-rgb), 0.9); border: 2px solid var(--element-border); padding: 15px; border-radius: 16px; animation: fadeInUp 0.6s ease-out forwards; box-shadow: inset 0 0 15px rgba(0,0,0,0.05); }
    383. 

  383. 

  384.         .btn-submit-main { background: #00E676 !important; color: #fff !important; font-size: 16px; padding: 10px 25px; box-shadow: 0 5px 20px rgba(0, 230, 118, 0.5) !important; border: 2px solid #fff !important; cursor: pointer; font-weight: 900; transition: 0.2s; }
    385. 

  385.         .btn-submit-main:active { transform: scale(0.95); }
    386. 

  386. 

  387.         @media screen and (max-width: 820px) {
    388. 

  388.             #main-app { padding: calc(max(10px, env(safe-area-inset-top)) + 70px) 10px 20px 10px; }
    389. 

  389.             .grid-container { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
    390. 

  390.             .panel { padding: 16px; }
    391. 

  391.             .canvas-wrapper { height: 260px; min-height: 160px; }
    392. 

  392.             .presets-row { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    393. 

  393.             .presets-row button { padding: 10px 2px; font-size: 11px; }
    394. 

  394.             .control-row { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
    395. 

  395.             .control-label { width: 100%; }
    396. 

  396.             .control-body { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    397. 

  397.             .btn-group { flex-direction: column; gap: 10px; margin-top: 10px; }
    398. 

  398.             .btn { width: 100%; padding: 14px; font-size: 15px; }
    399. 

  399.             .info-grid, .calc-grid { grid-template-columns: 1fr; }
    400. 

  400.             .site-content { padding: 18px; }
    401. 

  401.             .modal-content { padding: 20px; }
    402. 

  402.             .test-modes { grid-template-columns: 1fr; }
    403. 

  403.             .hide-mobile { display: none; }
    404. 

  404.             .btn-reload-styled { display: flex; }
    405. 

  405.         }
    406. 

  406.     </style>
    407. 

  407. </head>
    408. 

  408. <body style="background-color: var(--bg-color);">
    409. 

  409.     <div id="bg-layer"></div>
    410. 

  410.     <div id="sidebar-overlay" onclick="toggleSidebar()"></div>
    411. 

  411.     <div id="global-tooltip"></div>
    412. 

  412.     
    413. 

  413.     <!-- КОНТЕЙНЕР ДЛЯ НОВЫХ УВЕДОМЛЕНИЙ -->
    414. 

  414.     <div id="toast-container"></div>
    415. 

  415. 

  416.     <div id="welcome-screen">
    417. 

  417.         <div class="welcome-bg-grid"></div>
    418. 

  418.         <div class="welcome-orb orb-1"></div>
    419. 

  419.         <div class="welcome-orb orb-2"></div>
    420. 

  420.         <div class="logo-super-shape">
    421. 

  421.             <div class="logo-inner-content"><span class="emoji-fix" style="font-size: 44px;">〽️</span></div>
    422. 

  422.         </div>
    423. 

  423.         <h1 class="app-title gradient-text" data-i18n="appTitle" style="margin-top:20px;">HarmoniX</h1>
    424. 

  424.         <h2 class="app-subtitle" data-i18n="appSubtitle">Интерактивная Лаборатория Волновой Физики</h2>
    425. 

  425.         <div style="margin-bottom: 25px; font-size: 13.5px; font-weight: bold; color: var(--accent); background: rgba(var(--panel-rgb), 0.95); padding: 8px 18px; border-radius: var(--wave-btn-radius); border: 2px solid var(--accent); box-shadow: 0 0 25px rgba(156, 39, 176, 0.45);">
    426. 

  426.             <span class="emoji-fix">✨</span> <span data-i18n="hintYellow">Версия 21.0 Nova | Максимальный интерактив!</span>
    427. 

  427.         </div>
    428. 

  428.         <button class="btn-enter glass-element interactive-hover btn-shine" onclick="startApp()"><span class="emoji-fix">▶</span> <span data-i18n="btnStart">Начать работу</span></button>
    429. 

  429.     </div>
    430. 

  430. 

  431.     <!-- МЕНЮ НАСТРОЕК -->
    432. 

  432.     <div id="sidebar" class="glass-panel">
    433. 

  433.         <div class="sidebar-header">
    434. 

  434.             <h2 class="gradient-text" style="margin:0; font-size: 18px;"><span class="emoji-fix">⚙</span> <span data-i18n="menuSettings">Настройки</span></h2>
    435. 

  435.             <div class="close-sidebar" onclick="toggleSidebar(); playAudioCue('menuClick');">&times;</div>
    436. 

  436.         </div>
    437. 

  437. 

  438.         <div class="sidebar-section">
    439. 

  439.             <h3 class="sidebar-title"><span class="emoji-fix">🌐</span> Язык / Language</h3>
    440. 

  440.             <div class="glass-controls">
    441. 

  441.                 <button class="lang-btn lang-ru active interactive-hover" onclick="setLang('ru'); playAudioCue('menuClick');">🇷🇺 Русский</button>
    442. 

  442.                 <button class="lang-btn lang-en interactive-hover" onclick="setLang('en'); playAudioCue('menuClick');">🇬🇧 English</button>
    443. 

  443.             </div>
    444. 

  444.         </div>
    445. 

  445. 

  446.         <div class="sidebar-section">
    447. 

  447.             <h3 class="sidebar-title"><span class="emoji-fix">📌</span> <span data-i18n="navHeader">Разделы и Инфо</span></h3>
    448. 

  448.             <div class="sidebar-btn-asym glass-element" onclick="toggleSidebar(); window.scrollTo({top: 0, behavior: 'smooth'}); playAudioCue('menuClick');">🏠 <span data-i18n="navMain">Главная панель</span></div>
    449. 

  449.             <div class="sidebar-btn-asym glass-element" onclick="openTestMenu(); toggleSidebar(); playAudioCue('menuClick');">🎓 <span data-i18n="navTest">Итоговое Тестирование</span></div>
    450. 

  450.             <div class="sidebar-btn-asym glass-element" onclick="showInfoModal('formulas'); toggleSidebar(); playAudioCue('menuClick');">📚 <span data-i18n="navFormulas">Справочник формул</span></div>
    451. 

  451.             <div class="sidebar-btn-asym glass-element" onclick="showInfoModal('about'); toggleSidebar(); playAudioCue('menuClick');">ℹ️ <span data-i18n="navAbout">О платформе</span></div>
    452. 

  452.         </div>
    453. 

  453. 

  454.         <div class="sidebar-section">
    455. 

  455.             <h3 class="sidebar-title"><span class="emoji-fix">⚡</span> <span data-i18n="lblGraphTools">Инструменты графиков</span></h3>
    456. 

  456.             <div class="glass-controls">
    457. 

  457.                 <button id="btnLabelsToggle" class="btn-glass-on active glass-element" onclick="toggleLabels(); playAudioCue('menuClick');"><span data-i18n="lblLabels">Подписи: Вкл</span></button>
    458. 

  458.                 <button id="btnGlowToggle" class="btn-glass-on glass-element" style="background: rgba(var(--panel-rgb), 0.3);" onclick="toggleGlow(); playAudioCue('menuClick');"><span data-i18n="lblNeon">Неон: Выкл</span></button>
    459. 

  459.             </div>
    460. 

  460.             <div class="glass-controls">
    461. 

  461.                 <button id="btnGridToggle" class="btn-glass-on active glass-element" onclick="toggleGrid(); playAudioCue('menuClick');"><span data-i18n="lblGrid">Сетка: Вкл</span></button>
    462. 

  462.                 <button id="btnLissajous" class="btn-glass-on glass-element" style="background: rgba(var(--panel-rgb), 0.3);" onclick="toggleLissajous(); playAudioCue('menuClick');"><span data-i18n="lblLissajous">Лиссажу: Выкл</span></button>
    463. 

  463.             </div>
    464. 

  464.             <div style="margin-top: 10px;">
    465. 

  465.                 <label style="font-size:11px; font-weight:bold; display:block;" data-i18n="lblHeightResize">Высота холстов графиков:</label>
    466. 

  466.                 <input type="range" id="canvasHeightSlider" min="160" max="450" value="260" oninput="setCanvasHeight(this.value)">
    467. 

  467.             </div>
    468. 

  468.         </div>
    469. 

  469. 

  470.         <div class="sidebar-section">
    471. 

  471.             <h3 class="sidebar-title"><span class="emoji-fix">🧊</span> <span data-i18n="lblGlass">Жидкое стекло</span></h3>
    472. 

  472.             <div class="glass-controls">
    473. 

  473.                 <button id="btnGOn" class="btn-glass-on active glass-element" onclick="setGlassState(true); playAudioCue('menuClick');">Вкл</button>
    474. 

  474.                 <button id="btnGOff" class="btn-glass-on glass-element" style="background: rgba(var(--panel-rgb), 0.3);" onclick="setGlassState(false); playAudioCue('menuClick');">Выкл</button>
    475. 

  475.                 <button class="btn-glass-auto glass-element btn-shine" onclick="autoGlass(); playAudioCue('menuClick');"><span class="emoji-fix">🤖</span> Авто</button>
    476. 

  476.             </div>
    477. 

  477.             <input type="range" id="glassIntensity" min="0" max="100" value="70" oninput="updateGlassIntensity()">
    478. 

  478.         </div>
    479. 

  479. 

  480.         <div class="sidebar-section">
    481. 

  481.             <h3 class="sidebar-title"><span class="emoji-fix">🎨</span> <span data-i18n="lblTheme">Оформление</span></h3>
    482. 

  482.             <div class="setting-block">
    483. 

  483.                 <label id="lblThemeSelect" data-i18n="lblThemeSelect">Тема оформления:</label>
    484. 

  484.                 <select id="themeSelect" class="emoji-fix glass-element" onchange="changeTheme(this.value); playAudioCue('menuClick');"></select>
    485. 

  485.             </div>
    486. 

  486.             <div class="setting-block">
    487. 

  487.                 <label id="lblCustomBg" data-i18n="lblCustomBg">Свои обои:</label>
    488. 

  488.                 <div class="file-upload-wrapper glass-element">
    489. 

  489.                     <input type="file" accept="image/*" id="bgUpload" class="file-upload-input" onchange="uploadBackground(event)">
    490. 

  490.                     <div class="file-upload-btn" data-i18n="btnPickImg">📂 Выбрать картинку</div>
    491. 

  491.                 </div>
    492. 

  492.                 <button class="btn btn-reset glass-element interactive-hover" style="width: 100%; margin-top: 8px; padding: 10px;" onclick="clearBackground(); playAudioCue('menuClick');"><span class="emoji-fix">🗑</span> <span data-i18n="btnDelBg">Сбросить фон</span></button>
    493. 

  493.             </div>
    494. 

  494.             <div class="setting-block">
    495. 

  495.                 <label id="lblBgFilter" data-i18n="lblBgFilter">Фильтр фона:</label>
    496. 

  496.                 <select class="emoji-fix glass-element" id="bgFilter" onchange="changeFilter(this.value); playAudioCue('menuClick');"></select>
    497. 

  497.             </div>
    498. 

  498.         </div>
    499. 

  499.         <div style="flex-grow: 1;"></div>
    500. 

  500.         <div style="text-align: center; font-size: 12px; opacity: 0.7; font-weight: bold; color: var(--accent);">v21.0 Enterprise Nova</div>
    501. 

  501.     </div>
    502. 

  502. 

  503.     <!-- ВЕРХНЯЯ ПАНЕЛЬ -->
    504. 

  504.     <div class="top-bar-wrapper" id="main-nav-bar">
    505. 

  505.         <div class="top-bar glass-panel pop-animation">
    506. 

  506.             <button class="menu-btn-special interactive-hover" onclick="toggleSidebar(); playAudioCue('glassBell');"><span class="emoji-fix">☰</span> <span class="hide-mobile" data-i18n="btnMenu">Меню</span></button>
    507. 

  507.             <button class="btn-reload-styled interactive-hover" onclick="location.reload(); playAudioCue('glassBell');"><span class="emoji-fix">🔄</span> <span class="hide-mobile" data-i18n="btnReload">Обновить</span></button>
    508. 

  508. 

  509.             <div class="nav-logo interactive-hover" onclick="window.scrollTo({top: 0, behavior: 'smooth'}); cursor: pointer;">
    510. 

  510.                 <div class="logo-super-shape small"><div class="logo-inner-content"><span class="emoji-fix" style="font-size:14px;">〽️</span></div></div>
    511. 

  511.                 <span class="hide-mobile gradient-text">HarmoniX</span>
    512. 

  512.             </div>
    513. 

  513. 

  514.             <div style="position: relative;">
    515. 

  515.                 <button id="btnMainTestMode" class="btn-test-special interactive-hover" onclick="openTestMenu(); playAudioCue('glassBell');"><span class="emoji-fix">🎓</span> <span data-i18n="btnTest">Тесты</span></button>
    516. 

  516.             </div>
    517. 

  517.             <button class="btn-fullscreen-compact interactive-hover" onclick="toggleFullscreen(); playAudioCue('glassBell');" title="Full Screen"><span class="emoji-fix">🔲</span></button>
    518. 

  518.         </div>
    519. 

  519.     </div>
    520. 

  520. 

  521.     <!-- ОСНОВНОЙ КОНТЕНТ И ГРАФИКИ -->
    522. 

  522.     <div id="main-app">
    523. 

  523.         <div class="grid-container">
    524. 

  524.             <div class="panel glass-panel pop-animation" style="animation-delay: 0.05s;">
    525. 

  525.                 <div class="panel-header"><h3 style="margin:0; font-size:16px;" data-i18n="pnl1">1. Базовое колебание</h3><span id="lblLisMode" style="font-size:12px; font-weight:bold; color:var(--accent);"></span></div>
    526. 

  526.                 <div class="canvas-wrapper glass-element" ondblclick="resetCanvasSizes()">
    527. 

  527.                     <canvas id="canvas-single"></canvas>
    528. 

  528.                     <div class="chart-telemetry" id="telemSingle">
    529. 

  529.                         <div class="telemetry-chip"><span data-i18n="telWave">Волна</span>: <span id="telWaveName" class="val-highlight">V1</span></div>
    530. 

  530.                         <div class="telemetry-chip"><span data-i18n="telF">Частота</span>: <span id="telFreq" class="val-highlight">440</span> <span class="unit-freq" data-i18n="hz">Гц</span></div>
    531. 

  531.                         <div class="telemetry-chip"><span data-i18n="telA">Амплитуда</span>: <span id="telAmp" class="val-highlight">80</span>%</div>
    532. 

  532.                         <div class="telemetry-chip"><span data-i18n="lblPhaseShort">Фаза</span>: <span id="telPhase" class="val-highlight">0°</span></div>
    533. 

  533.                     </div>
    534. 

  534.                 </div>
    535. 

  535.             </div>
    536. 

  536. 

  537.             <div class="panel glass-panel pop-animation" style="animation-delay: 0.1s;">
    538. 

  538.                 <div class="panel-header">
    539. 

  539.                     <h3 style="margin:0; font-size:16px;" data-i18n="pnl3">3. Теорема Фурье (Сумма)</h3>
    540. 

  540.                     <div style="position: relative; z-index: 100;">
    541. 

  541.                         <button id="btnMainSnap" class="btn-camera-snap" onclick="downloadGraph('canvas-sum'); playAudioCue('cameraSnap');">
    542. 

  542.                             <span class="emoji-fix">📸</span> <span data-i18n="btnSaveCompact">Снимок</span>
    543. 

  543.                         </button>
    544. 

  544.                     </div>
    545. 

  545.                 </div>
    546. 

  546.                 <div class="canvas-wrapper glass-element" ondblclick="resetCanvasSizes()">
    547. 

  547.                     <canvas id="canvas-sum"></canvas>
    548. 

  548.                     <div class="chart-telemetry" id="telemSum">
    549. 

  549.                         <div class="telemetry-chip"><span data-i18n="telClip">Нелинейное</span>: <span id="telClipStatus" class="val-highlight">Выкл</span></div>
    550. 

  550.                         <div class="telemetry-chip" id="telemTHD" style="display:none;"><span data-i18n="telTHD">THD (Искажения)</span>: <span id="telTHDVal" class="val-highlight">0%</span></div>
    551. 

  551.                         <div class="telemetry-chip" id="telemLimit" style="display:none;"><span data-i18n="telLimit">Порог среза</span>: <span id="telLimitVal" class="val-highlight">±25%</span></div>
    552. 

  552.                     </div>
    553. 

  553.                 </div>
    554. 

  554.             </div>
    555. 

  555. 

  556.             <div class="panel glass-panel pop-animation" style="animation-delay: 0.15s;">
    557. 

  557.                 <div class="panel-header">
    558. 

  558.                     <h3 style="margin:0; font-size:16px;" data-i18n="pnl2">2. Панель Управления</h3>
    559. 

  559.                     <div class="presets-row">
    560. 

  560.                         <button class="glass-element btn-shine active interactive-hover" id="pr_sine" onclick="setPreset('sine')"><span class="emoji-fix">〰</span> <span data-i18n="btnSine">Синус</span></button>
    561. 

  561.                         <button class="glass-element interactive-hover" id="pr_square" onclick="setPreset('square')"><span class="emoji-fix">🟦</span> <span data-i18n="btnSquare">Меандр</span></button>
    562. 

  562.                         <button class="glass-element interactive-hover" id="pr_triangle" onclick="setPreset('triangle')"><span class="emoji-fix">📐</span> <span data-i18n="btnTriangle">Треуг.</span></button>
    563. 

  563.                         <button class="glass-element interactive-hover" id="pr_sawtooth" onclick="setPreset('sawtooth')"><span class="emoji-fix">🔪</span> <span data-i18n="btnSaw">Пила</span></button>
    564. 

  564.                     </div>
    565. 

  565.                 </div>
    566. 

  566. 

  567.                 <div class="tabs">
    568. 

  568.                     <div class="tab glass-element active interactive-hover" onclick="switchTab(0); playAudioCue('mainPulse');">V1</div>
    569. 

  569.                     <div class="tab glass-element interactive-hover" onclick="switchTab(1); playAudioCue('mainPulse');">V2</div>
    570. 

  570.                     <div class="tab glass-element interactive-hover" onclick="switchTab(2); playAudioCue('mainPulse');">V3</div>
    571. 

  571.                 </div>
    572. 

  572. 

  573.                 <div class="control-row">
    574. 

  574.                     <div class="control-label" data-i18n="lblStep">Шаг частоты:</div>
    575. 

  575.                     <div class="control-body">
    576. 

  576.                         <div class="step-toggle">
    577. 

  577.                             <div class="step-btn interactive-hover" id="st10" onclick="updateStep(10); playAudioCue('mainPulse');">10 <span class="unit-freq" data-i18n="hz">Гц</span></div>
    578. 

  578.                             <div class="step-btn active interactive-hover" id="st100" onclick="updateStep(100); playAudioCue('mainPulse');">100 <span class="unit-freq" data-i18n="hz">Гц</span></div>
    579. 

  579.                         </div>
    580. 

  580.                     </div>
    581. 

  581.                 </div>
    582. 

  582. 

  583.                 <div class="control-row">
    584. 

  584.                     <div class="control-label" data-i18n="lblFreq">Частота (Гц):</div>
    585. 

  585.                     <div class="control-body">
    586. 

  586.                         <input type="range" id="freq" min="0" max="20000" step="100" value="440" oninput="updateWaveFromSlider('freq')">
    587. 

  587.                         <div class="input-wrapper"><input type="number" id="inputV" class="value-input glass-element" value="440" min="0" max="20000" oninput="updateWaveFromInput('freq')"></div>
    588. 

  588.                     </div>
    589. 

  589.                 </div>
    590. 

  590. 

  591.                 <div class="control-row">
    592. 

  592.                     <div class="control-label" data-i18n="lblAmp">Амплитуда (%):</div>
    593. 

  593.                     <div class="control-body">
    594. 

  594.                         <input type="range" id="amp" min="0" max="100" value="80" oninput="updateWaveFromSlider('amp')">
    595. 

  595.                         <div class="input-wrapper"><input type="number" id="inputA" class="value-input glass-element" value="80" min="0" max="100" oninput="updateWaveFromInput('amp')"></div>
    596. 

  596.                     </div>
    597. 

  597.                 </div>
    598. 

  598. 

  599.                 <div class="secondary-params glass-element">
    600. 

  600.                     <div class="control-row" style="margin-bottom: 8px;">
    601. 

  601.                         <div class="control-label"><span data-i18n="lblPhase">Сдвиг фазы (°)</span><span class="hint-icon" data-i18n-hint="hintPhase" data-hint="Сдвиг фазы смещает волну во времени. Сдвиг на 180° создает инвертированную волну (противофазу).">?</span></div>
    602. 

  602.                         <div class="control-body">
    603. 

  603.                             <input type="range" class="slider-alt" id="phase" min="0" max="360" step="1" value="0" oninput="updateWaveFromSlider('phase')">
    604. 

  604.                             <div class="input-wrapper"><input type="number" id="inputP" class="value-input input-alt glass-element" value="0" min="0" max="360" oninput="updateWaveFromInput('phase')"></div>
    605. 

  605.                         </div>
    606. 

  606.                     </div>
    607. 

  607. 

  608.                     <div class="control-row" style="margin-bottom: 0;">
    609. 

  609.                         <div class="control-label"><span data-i18n="lblSpeed">Скорость волны</span><span class="hint-icon" data-i18n-hint="hintSpeedGraph" data-hint="Управление скоростью анимации на графиках. Не меняет физическую частоту колебаний.">?</span></div>
    610. 

  610.                         <div class="control-body">
    611. 

  611.                             <input type="range" class="slider-alt" id="speed" min="0.1" max="3" step="0.1" value="1" oninput="updateSpeedValue(this.value);">
    612. 

  612.                             <div class="input-wrapper"><div class="value-input input-alt glass-element" id="valSpeedDisp" style="line-height: 20px;">1.0x</div></div>
    613. 

  613.                         </div>
    614. 

  614.                     </div>
    615. 

  615.                 </div>
    616. 

  616. 

  617.                 <div class="btn-group">
    618. 

  618.                     <button class="btn btn-audio interactive-hover" onclick="toggleAudio(); playAudioCue('mainPulse');" id="btnAudio"><span class="emoji-fix">🔊</span> <span data-i18n="btnAudio">Динамик</span></button>
    619. 

  619.                     <button class="btn btn-pause interactive-hover" onclick="togglePause(); playAudioCue('mainPulse');" id="btnPause"><span class="emoji-fix">⏸</span> <span data-i18n="btnPause">Стоп-кадр</span></button>
    620. 

  620.                     
    621. 

  621.                     <button class="btn btn-dist interactive-hover" onclick="toggleClip(); playAudioCue('mainPulse');" id="btnClip" style="position: relative; display: flex; align-items: center; justify-content: center; gap: 4px;">
    622. 

  622.                         <span class="emoji-fix">⚡</span> 
    623. 

  623.                         <span data-i18n="btnClip">Нелинейн. преобр.</span>
    624. 

  624.                         <span class="hint-icon pulse-alert" style="background: #E91E63; border-color: #fff; box-shadow: 0 0 12px #E91E63; width: 18px; height: 18px; font-size: 11px;" data-i18n-hint="hintClip" data-hint="Имитирует перегрузку усилителя (клиппинг).">?</span>
    625. 

  625.                     </button>
    626. 

  626.                     
    627. 

  627.                     <button class="btn btn-reset interactive-hover" onclick="resetAll(); playAudioCue('mainPulse');"><span class="emoji-fix">🔄</span> <span data-i18n="btnReset">Сброс</span></button>
    628. 

  628.                 </div>
    629. 

  629.             </div>
    630. 

  630. 

  631.             <div class="panel glass-panel pop-animation" style="animation-delay: 0.2s;">
    632. 

  632.                 <h3 style="margin:0; margin-bottom: 8px; font-size:16px;" data-i18n="pnl4">4. Спектрограмма</h3>
    633. 

  633.                 <div class="canvas-wrapper glass-element" ondblclick="resetCanvasSizes()">
    634. 

  634.                     <canvas id="canvas-spectrum"></canvas>
    635. 

  635.                     <div class="chart-telemetry" id="telemSpec">
    636. 

  636.                         <div class="telemetry-chip"><span data-i18n="telXAxis">Ось X</span>: <span class="val-highlight">0 — 20k <span class="unit-freq" data-i18n="hz">Гц</span></span></div>
    637. 

  637.                         <div class="telemetry-chip"><span data-i18n="telPeaks">Пики</span>: <span id="telSpecPeaks" class="val-highlight">1</span></div>
    638. 

  638.                     </div>
    639. 

  639.                 </div>
    640. 

  640.             </div>
    641. 

  641. 

  642.             <div class="panel glass-panel pop-animation" style="grid-column: 1 / -1; border-color: var(--tzi-color); animation-delay: 0.25s;">
    643. 

  643.                 <div class="panel-header">
    644. 

  644.                     <h3 style="color: var(--tzi-color); margin: 0;"><span class="emoji-fix">🛡️</span> <span data-i18n="tziTitle">ТЗИ: Виброакустическая защита</span></h3>
    645. 

  645.                     <span class="hint-icon" style="background:var(--tzi-color); color:#000; margin: 0;" data-i18n-hint="hintTzi" data-hint="Симуляция технической защиты информации.">?</span>
    646. 

  646.                 </div>
    647. 

  647.                 <p style="font-size:15px; margin-bottom:15px; margin-top: 10px; font-weight: bold;" data-i18n="tziDesc">Активация генератора шума для маскировки речевой информации от средств перехвата:</p>
    648. 

  648.                 <div style="display:flex; justify-content:center; position: relative;">
    649. 

  649.                     <button class="btn btn-tzi interactive-hover" id="btnTziMode" style="width:100%; max-width:400px; padding:14px; font-size:16px; font-weight:900; position:relative; z-index:100;" onclick="toggleTZI()"><span class="emoji-fix">🔒</span> <span data-i18n="btnTziStart">Активировать маскировку</span></button>
    650. 

  650.                 </div>
    651. 

  651.             </div>
    652. 

  652.         </div>
    653. 

  653. 

  654.         <div class="site-content glass-panel pop-animation" style="animation-delay: 0.3s;">
    655. 

  655.             <h2 class="content-header gradient-text" data-i18n="eduHeader">📚 Академия Волновой Механики</h2>
    656. 

  656. 

  657.             <div class="info-grid">
    658. 

  658.                 <div class="info-card glass-element interactive-hover">
    659. 

  659.                     <h3 data-i18n="eduCard1Title"><span class="emoji-fix">〰️</span> Природа механических волн</h3>
    660. 

  660.                     <p data-i18n="eduCard1Text">Механическая волна представляет собой процесс распространения колебательного возмущения в упругой среде. При этом частицы среды лишь совершают малые колебания возле равновесия, а переносится исключительно <b>ЭНЕРГИЯ И ИМПУЛЬС</b>.</p>
    661. 

  661.                 </div>
    662. 

  662. 

  663.                 <div class="info-card glass-element interactive-hover">
    664. 

  664.                     <h3 data-i18n="eduCard2Title"><span class="emoji-fix">📉</span> Теорема и спектральный анализ Фурье</h3>
    665. 

  665.                     <p data-i18n="eduCard2Text1">В 1822 году Жан-Батист Фурье доказал: <b>ЛЮБОЙ ПЕРИОДИЧЕСКИЙ СИГНАЛ</b> сложной формы может быть разложен в ряд простых гармонических волн кратных частот.</p>
    666. 

  666.                 </div>
    667. 

  667.             </div>
    668. 

  668. 

  669.             <div class="calc-grid">
    670. 

  670.                 <div class="wave-calculator">
    671. 

  671.                     <h3 style="margin-top:0; color:#fff;" data-i18n="calcTitle"><span class="emoji-fix">🧮</span> Калькулятор длины волны</h3>
    672. 

  672.                     <div class="calc-screen">
    673. 

  673.                         <div class="calc-formula">λ = v / ν</div>
    674. 

  674.                         <div style="font-size: 13px; color: #81c784; margin-bottom: 5px;" id="lblCalcAirDesc" data-i18n="calcAirDesc">В воздухе (343 м/с):</div>
    675. 

  675.                         <div class="calc-result"><span id="calcResAir">0.77</span> <span class="calc-m" data-i18n="meters">м</span></div>
    676. 

  676.                     </div>
    677. 

  677.                     <div class="calc-controls">
    678. 

  678.                         <span style="font-weight: bold; font-size: 14px;"><span data-i18n="lblFreqShort">ν (Гц)</span>:</span>
    679. 

  679.                         <input type="number" id="calcFreq1" class="calc-input" value="440" min="1" oninput="calculateWaveLength(); playAudioCue('calcKey');">
    680. 

  680.                     </div>
    681. 

  681.                     
    682. 

  682.                     <div style="display:flex; justify-content:center; gap:8px; align-items: center; border-top: 1px dashed #444; padding-top: 10px; margin-top: 10px; flex-wrap: wrap;">
    683. 

  683.                         <span style="font-weight: bold; font-size:13px; color:#aaa;" data-i18n="calcSpeedLabel">Скорость (м/с):</span>
    684. 

  684.                         <input type="number" id="calcSpeedCustom" class="calc-input" style="width: 70px; padding: 6px; font-size: 14px;" value="343" step="10" oninput="onManualSpeedInput(); calculateWaveLength(); playAudioCue('calcKey');">
    685. 

  685.                         <select id="mediumSelect" class="calc-select" onchange="onSelectMedium(); calculateWaveLength(); playAudioCue('calcKey');"></select>
    686. 

  686.                         <span class="hint-icon" style="background:#888;" data-i18n-hint="hintSpeed" data-hint="Выберите среду из списка">?</span>
    687. 

  687.                     </div>
    688. 

  688.                 </div>
    689. 

  689. 

  690.                 <div class="wave-calculator">
    691. 

  691.                     <h3 style="margin-top:0; color:#fff;" data-i18n="calc2Title"><span class="emoji-fix">⏱</span> Калькулятор Периода</h3>
    692. 

  692.                     <div class="calc-screen">
    693. 

  693.                         <div class="calc-formula">T = 1 / ν  |  ω = 2πν</div>
    694. 

  694.                         <div style="font-size: 13px; color: #81c784; margin-bottom: 5px;" data-i18n="calcCycle">Длительность 1 цикла (Период):</div>
    695. 

  695.                         <div class="calc-result"><span id="calcResPeriod">0.00227</span> <span class="calc-s" data-i18n="sec">с</span></div>
    696. 

  696.                     </div>
    697. 

  697.                     <div class="calc-controls">
    698. 

  698.                         <span style="font-weight: bold; font-size: 14px;"><span data-i18n="lblFreqShort">ν (Гц)</span>:</span>
    699. 

  699.                         <input type="number" id="calcFreq2" class="calc-input" value="440" min="1" oninput="document.getElementById('calcFreq1').value = this.value; calculateWaveLength(); playAudioCue('calcKey');">
    700. 

  700.                     </div>
    701. 

  701.                     <div style="display:flex; justify-content: space-around; margin-top: 15px; font-family: monospace; color: #81c784; font-size: 13px; background: rgba(0,0,0,0.5); padding: 8px; border-radius: 8px;">
    702. 

  702.                         <div id="calcResOmega" data-i18n="omegaLabel">Цикл. частота (ω): ~2764.6 рад/с</div>
    703. 

  703.                     </div>
    704. 

  704.                 </div>
    705. 

  705.             </div>
    706. 

  706. 

  707.             <h2 class="content-header gradient-text" style="margin-top:35px;" data-i18n="faqTitle">💬 Динамические вопросы и ответы (FAQ)</h2>
    708. 

  708.             <div id="dynamic-faq-container"></div>
    709. 

  709. 

  710.             <h3 data-i18n="resTitleRU" style="text-align: center; font-size: 20px; margin-top: 45px; color: var(--accent);">🇷🇺 Российские образовательные платформы</h3>
    711. 

  711.             <div class="resource-grid">
    712. 

  712.                 <a href="https://foxford.ru/wiki/fizika" target="_blank" class="premium-link-btn foxford-btn interactive-hover" onclick="playAudioCue('glassBell');">
    713. 

  713.                     <span class="emoji-fix" style="font-size:18px;">🦊</span>
    714. 

  714.                     <span data-i18n="resFoxford">Фоксфорд.Учебник</span>
    715. 

  715.                 </a>
    716. 

  716.                 <a href="https://interneturok.ru/subject/physics" target="_blank" class="premium-link-btn ru-btn interactive-hover" onclick="playAudioCue('glassBell');">
    717. 

  717.                     <span class="emoji-fix" style="font-size:18px;">📚</span>
    718. 

  718.                     <span data-i18n="resInterneturok">InternetUrok: Физика</span>
    719. 

  719.                 </a>
    720. 

  720.                 <a href="http://www.virtulab.net/" target="_blank" class="premium-link-btn ru-btn interactive-hover" onclick="playAudioCue('glassBell');">
    721. 

  721.                     <span class="emoji-fix" style="font-size:18px;">🏫</span>
    722. 

  722.                     <span data-i18n="resVirtulab">VirtuLab: Лаборатории</span>
    723. 

  723.                 </a>
    724. 

  724.                 <a href="https://rutube.ru/search/?q=%D0%9F%D0%B0%D0%B2%D0%B5%D0%BB+%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80+%D0%BC%D0%B5%D1%85%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5+%D0%B2%D0%BE%D0%BB%D0%BD%D1%8B" target="_blank" class="premium-link-btn rutube-btn interactive-hover" onclick="playAudioCue('glassBell');">
    725. 

  725.                     <span class="emoji-fix" style="font-size:18px;">⬛</span>
    726. 

  726.                     <span data-i18n="linkRutube">Rutube: Лекции по физике</span>
    727. 

  727.                 </a>
    728. 

  728.                 <a href="https://vk.com/video/search?q=%D0%9F%D0%B0%D0%B2%D0%B5%D0%BB+%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80+%D0%BC%D0%B5%D1%85%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5+%D0%B2%D0%BE%D0%BB%D0%BD%D1%8B" target="_blank" class="premium-link-btn ru-btn interactive-hover" onclick="playAudioCue('glassBell');">
    729. 

  729.                     <span class="emoji-fix" style="font-size:18px;">🟦</span>
    730. 

  730.                     <span data-i18n="linkVK">VK Видео: Волны и колебания</span>
    731. 

  731.                 </a>
    732. 

  732.             </div>
    733. 

  733. 

  734.             <h3 data-i18n="resTitleINT" style="text-align: center; font-size: 20px; margin-top: 35px; color: var(--accent);">🌍 Международные симуляторы и материалы</h3>
    735. 

  735.             <div class="resource-grid">
    736. 

  736.                 <a href="https://www.youtube.com/results?search_query=%D0%9F%D0%B0%D0%B2%D0%B5%D0%BB+%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80+%D0%BC%D0%B5%D1%85%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5+%D0%B2%D0%BE%D0%BB%D0%BD%D1%8B" target="_blank" class="premium-link-btn youtube-btn interactive-hover" onclick="playAudioCue('glassBell');">
    737. 

  737.                     <span class="emoji-fix" style="font-size:18px;">🟥</span>
    738. 

  738.                     <span data-i18n="linkYT">YouTube: Урок Павла Виктора</span>
    739. 

  739.                 </a>
    740. 

  740.                 <a href="https://phet.colorado.edu/sims/html/wave-on-a-string/latest/wave-on-a-string_all.html" target="_blank" class="premium-link-btn sim-btn interactive-hover" onclick="playAudioCue('glassBell');">
    741. 

  741.                     <span class="emoji-fix" style="font-size:18px;">🧪</span>
    742. 

  742.                     <span data-i18n="resPhet">PhET: Волна на струне</span>
    743. 

  743.                 </a>
    744. 

  744.                 <a href="https://academo.org/demos/wave-interference-beat-frequency/" target="_blank" class="premium-link-btn sim-btn interactive-hover" onclick="playAudioCue('glassBell');">
    745. 

  745.                     <span class="emoji-fix" style="font-size:18px;">📡</span>
    746. 

  746.                     <span data-i18n="resAcademo">Academo: Интерференция</span>
    747. 

  747.                 </a>
    748. 

  748.                 <a href="https://www.falstad.com/fourier/" target="_blank" class="premium-link-btn sim-btn interactive-hover" onclick="playAudioCue('glassBell');">
    749. 

  749.                     <span class="emoji-fix" style="font-size:18px;">📈</span>
    750. 

  750.                     <span data-i18n="resFalstad">Falstad: Синтезатор</span>
    751. 

  751.                 </a>
    752. 

  752.             </div>
    753. 

  753.         </div>
    754. 

  754. 

  755.         <div class="app-footer">
    756. 

  756.             HarmoniX v21.0 Enterprise Nova | Лаборатория Волновой Физики © 2026<br>
    757. 

  757.             Интерактивный анализ механических волн, Теория Фурье и Фигуры Лиссажу
    758. 

  758.         </div>
    759. 

  759.     </div>
    760. 

  760. 

  761.     <!-- ТЕСТИРОВАНИЕ: СЛАЙДЕР И УМНЫЙ ТАЙМЕР -->
    762. 

  762.     <div id="test-overlay" class="modal-overlay">
    763. 

  763.         <div class="modal-content glass-panel" style="z-index: 99999;">
    764. 

  764.             <span class="close-btn" onclick="closeTest(); playAudioCue('mainPulse');">&times;</span>
    765. 

  765.             <h2 class="gradient-text" style="text-align: center; margin-top: 0; font-size: 24px;"><span class="emoji-fix">📝</span> <span data-i18n="testHeader">Тестирование знаний</span></h2>
    766. 

  766. 

  767.             <div id="test-start-menu">
    768. 

  768.                 <p style="text-align:center; font-size: 15px; margin-bottom:15px; font-weight: bold;" data-i18n="testSelectSub">Выберите режим тестирования:</p>
    769. 

  769.                 <div class="test-modes" id="testModesContainer">
    770. 

  770.                     <button class="btn btn-easy interactive-hover" onclick="startQuiz(5)"><span class="emoji-fix">🟢</span> <span data-i18n="modeExp">Экспресс</span><br><small data-i18n="time5">5 (Без таймера)</small></button>
    771. 

  771.                     <button class="btn btn-medium interactive-hover" onclick="startQuiz(15)"><span class="emoji-fix">⚡</span> <span data-i18n="modeStd">Стандарт</span><br><small data-i18n="time15">15 (5 мин)</small></button>
    772. 

  772.                     <button class="btn btn-hard interactive-hover" onclick="startQuiz(30)"><span class="emoji-fix">🔥</span> <span data-i18n="modeFull">Полный курс</span><br><small data-i18n="time30">30 (10 мин)</small></button>
    773. 

  773.                     <button class="btn btn-ultra interactive-hover" onclick="startQuiz(50)"><span class="emoji-fix">👑</span> <span data-i18n="modeUltra">Ультра Профи</span><br><small data-i18n="time50">50 (15 мин)</small></button>
    774. 

  774.                 </div>
    775. 

  775.             </div>
    776. 

  776. 

  777.             <div id="quiz-process" style="display: none;">
    778. 

  778.                 <div class="quiz-timer-pill glass-panel btn-shine" id="quizTimerBar" style="display:none;">
    779. 

  779.                     <div class="timer-progress-bg">
    780. 

  780.                         <div id="quizTimerProgress" class="timer-progress-fill"></div>
    781. 

  781.                     </div>
    782. 

  782.                     <div class="timer-content">
    783. 

  783.                         <div style="display:flex; gap: 8px; align-items:center;">
    784. 

  784.                             <span class="timer-display" id="quizTimerVal">00:00</span>
    785. 

  785.                         </div>
    786. 

  786.                         <div style="display:flex; gap: 6px;">
    787. 

  787.                             <button class="btn-submit-main interactive-hover" onclick="checkTest(); playAudioCue('glassBell');" style="padding: 6px 14px; font-size:13px;"><span class="emoji-fix">✅</span> <span class="hide-mobile" data-i18n="btnCheck">Сдать</span></button>
    788. 

  788.                             <button class="btn btn-reset interactive-hover" onclick="closeTest(); playAudioCue('mainPulse');" style="padding: 6px 14px; font-size:13px; border:1px solid #fff;"><span class="emoji-fix">🚪</span> <span class="hide-mobile" data-i18n="btnExit">Выйти</span></button>
    789. 

  789.                         </div>
    790. 

  790.                     </div>
    791. 

  791.                 </div>
    792. 

  792. 

  793.                 <div class="question-card-wrapper" id="quiz-card-wrapper">
    794. 

  794.                     <div id="quiz-container"></div>
    795. 

  795.                 </div>
    796. 

  796. 

  797.                 <div class="quiz-nav-row" id="quiz-nav-controls">
    798. 

  798.                     <button class="quiz-nav-btn interactive-hover" id="btnPrevQ" onclick="prevQuestion(); playAudioCue('mainPulse');" disabled>
    799. 

  799.                         ◀ <span data-i18n="btnPrev">Назад</span>
    800. 

  800.                     </button>
    801. 

  801.                     <span id="quiz-step-indicator" style="font-weight: 800; font-size: 15px; color: var(--accent);">1 / 5</span>
    802. 

  802.                     <button class="quiz-nav-btn interactive-hover" id="btnNextQ" onclick="nextQuestion(); playAudioCue('mainPulse');">
    803. 

  803.                         <span data-i18n="btnNext">Вперед</span> ▶
    804. 

  804.                     </button>
    805. 

  805.                 </div>
    806. 

  806. 

  807.                 <div id="test-result-screen">
    808. 

  808.                     <div class="score-circle-wrapper">
    809. 

  809.                         <svg width="140" height="140" viewBox="0 0 120 120" class="circular-progress">
    810. 

  810.                             <circle class="bg" cx="60" cy="60" r="54"></circle>
    811. 

  811.                             <circle class="progress" id="scoreProgress" cx="60" cy="60" r="54"></circle>
    812. 

  812.                         </svg>
    813. 

  813.                         <div class="score-text" id="scoreCircleText">0%</div>
    814. 

  814.                     </div>
    815. 

  815. 

  816.                     <div id="test-result-text" style="font-size: 20px; font-weight: 900; margin-bottom: 15px;"></div>
    817. 

  817.                     <div class="review-box" id="quiz-explanation"></div>
    818. 

  818.                     
    819. 

  819.                     <div class="test-controls" style="margin-top: 25px;">
    820. 

  820.                         <button class="btn btn-test-special interactive-hover" onclick="openTestMenu(); playAudioCue('glassBell');" style="font-size: 15px; padding: 12px 24px;">
    821. 

  821.                             <span class="emoji-fix">🔄</span> <span data-i18n="btnTryAgain">Пройти снова</span>
    822. 

  822.                         </button>
    823. 

  823.                         <button class="btn btn-reset interactive-hover" onclick="closeTest(); playAudioCue('mainPulse');" style="font-size: 15px; padding: 12px 24px;">
    824. 

  824.                             <span class="emoji-fix">🚪</span> <span data-i18n="btnExit">Выйти</span>
    825. 

  825.                         </button>
    826. 

  826.                     </div>
    827. 

  827.                 </div>
    828. 

  828.             </div>
    829. 

  829.         </div>
    830. 

  830.     </div>
    831. 

  831. 

  832.     <!-- ИНФО ОВЕРЛЕИ -->
    833. 

  833.     <div id="info-overlay" class="modal-overlay">
    834. 

  834.         <div class="modal-content glass-panel" style="z-index: 99999;">
    835. 

  835.             <span class="close-btn" onclick="closeInfoModal(); playAudioCue('mainPulse');">&times;</span>
    836. 

  836. 

  837.             <div id="modal-formulas" class="info-content" style="display:none;">
    838. 

  838.                 <h2 class="gradient-text" style="text-align:center;"><span class="emoji-fix">📚</span> <span data-i18n="modalFormulasTitle">Справочник формул</span></h2>
    839. 

  839.                 <div class="formula-grid">
    840. 

  840.                     <div class="formula-card pop-animation interactive-hover" data-i18n="form1"><b>Уравнение бегущей волны:</b><br> y(x,t) = A · cos(w·t - k·x + θ)</div>
    841. 

  841.                     <div class="formula-card pop-animation interactive-hover" data-i18n="form2"><b>Гармоническое колебание:</b><br> y(t) = A · cos(w·t + θ)</div>
    842. 

  842.                     <div class="formula-card pop-animation interactive-hover" data-i18n="form3"><b>Период и частота:</b><br> T = 1 / V</div>
    843. 

  843.                     <div class="formula-card pop-animation interactive-hover" data-i18n="form4"><b>Циклическая частота:</b><br> w = 2 · π · V</div>
    844. 

  844.                     <div class="formula-card pop-animation interactive-hover" data-i18n="form5"><b>Длина волны:</b><br> λ = v / V = v · T</div>
    845. 

  845.                     <div class="formula-card pop-animation interactive-hover" data-i18n="form6"><b>Волновое число:</b><br> k = 2 · π / λ</div>
    846. 

  846.                     <div class="formula-card pop-animation interactive-hover" data-i18n="form7"><b>Эффект Доплера:</b><br> f' = f · (v ± v₀) / (v ∓ vₛ)</div>
    847. 

  847.                     <div class="formula-card pop-animation interactive-hover" data-i18n="form8"><b>Акустический импеданс:</b><br> Z = ρ · v</div>
    848. 

  848.                 </div>
    849. 

  849.                 
    850. 

  850.                 <h3 style="text-align:center; color:var(--accent); margin-top:25px;" data-i18n="fConst">⚛️ Фундаментальные константы</h3>
    851. 

  851.                 <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-top:10px;">
    852. 

  852.                     <div class="formula-card pop-animation interactive-hover" style="text-align:center; padding: 14px;" onclick="playAudioCue('calcKey')">
    853. 

  853.                         <b data-i18n="c1">Скорость света (c)</b>
    854. 

  854.                         <span style="color:#00E676; font-size:18px;">3·10⁸ м/с</span>
    855. 

  855.                     </div>
    856. 

  856.                     <div class="formula-card pop-animation interactive-hover" style="text-align:center; padding: 14px;" onclick="playAudioCue('calcKey')">
    857. 

  857.                         <b data-i18n="c2">Скорость звука (v)</b>
    858. 

  858.                         <span style="color:#00E676; font-size:18px;">~343 м/с</span>
    859. 

  859.                     </div>
    860. 

  860.                     <div class="formula-card pop-animation interactive-hover" style="text-align:center; padding: 14px;" onclick="playAudioCue('calcKey')">
    861. 

  861.                         <b data-i18n="c3">Число Пи (π)</b>
    862. 

  862.                         <span style="color:#00E676; font-size:18px;">3.14159...</span>
    863. 

  863.                     </div>
    864. 

  864.                 </div>
    865. 

  865.                 
    866. 

  866.                 <div style="margin-top:20px; text-align:center;">
    867. 

  867.                     <a href="http://hyperphysics.phy-astr.gsu.edu/hbase/hph.html" target="_blank" style="color:var(--base-wave); font-weight:bold; text-decoration:none;" data-i18n="hyperPhysics">🔗 База знаний HyperPhysics (GSU)</a>
    868. 

  868.                 </div>
    869. 

  869.             </div>
    870. 

  870. 

  871.             <!-- ОБНОВЛЕННЫЙ ЖУРНАЛ ИЗМЕНЕНИЙ И ЗВЕЗДЫ -->
    872. 

  872.             <div id="modal-about" class="info-content" style="display:none;">
    873. 

  873.                 <h2 class="gradient-text" style="text-align:center;"><span class="emoji-fix">🚀</span> <span data-i18n="modalAboutTitle">О платформе HarmoniX</span></h2>
    874. 

  874.                 
    875. 

  875.                 <!-- РЕЙТИНГ ОБНОВЛЕНИЯ -->
    876. 

  876.                 <div class="about-section pop-animation" style="text-align: center; border-color: var(--accent); background: rgba(var(--panel-rgb), 0.95); box-shadow: 0 4px 20px var(--btn-glow);">
    877. 

  877.                     <h3 style="justify-content: center;"><span class="emoji-fix">🌟</span> Оцените обновление HarmoniX</h3>
    878. 

  878.                     <p style="font-size: 13px; opacity: 0.8; margin-bottom: 5px;">Ваша оценка поможет сделать приложение еще лучше!</p>
    879. 

  879.                     <div class="star-rating">
    880. 

  880.                         <input type="radio" id="star5" name="rating" value="5" onclick="rateApp(5)"><label for="star5">★</label>
    881. 

  881.                         <input type="radio" id="star4" name="rating" value="4" onclick="rateApp(4)"><label for="star4">★</label>
    882. 

  882.                         <input type="radio" id="star3" name="rating" value="3" onclick="rateApp(3)"><label for="star3">★</label>
    883. 

  883.                         <input type="radio" id="star2" name="rating" value="2" onclick="rateApp(2)"><label for="star2">★</label>
    884. 

  884.                         <input type="radio" id="star1" name="rating" value="1" onclick="rateApp(1)"><label for="star1">★</label>
    885. 

  885.                     </div>
    886. 

  886.                 </div>
    887. 

  887. 

  888.                 <div class="about-section pop-animation interactive-hover">
    889. 

  889.                     <h3 data-i18n="aboutDescTitle"><span class="emoji-fix">ℹ️</span> Философия проекта</h3>
    890. 

  890.                     <p data-i18n="aboutDescText">HarmoniX — это высокотехнологичная PWA-среда для визуального моделирования волновых процессов, гармонического сложения и анализа спектра Фурье.</p>
    891. 

  891.                 </div>
    892. 

  892.                 
    893. 

  893.                 <h3 data-i18n="aboutHistoryTitle" style="color: var(--accent); margin-top:20px;">📜 Журнал изменений (Changelog)</h3>
    894. 

  894.                 <div class="timeline">
    895. 

  895.                     <div class="timeline-item pop-animation interactive-hover">
    896. 

  896.                         <h4>🌟 v21.0 Nova Update (Текущая):</h4>
    897. 

  897.                         <ul>
    898. 

  898.                             <li>Добавлены смарт-уведомления (Toasts) при входе.</li>
    899. 

  899.                             <li>Внедрена система онбординга (анимированные стрелки-подсказки).</li>
    900. 

  900.                             <li>Реализована система оценки проекта по звездам (Rating System).</li>
    901. 

  901.                             <li>Полностью переработан и расширен Журнал изменений.</li>
    902. 

  902.                         </ul>
    903. 

  903.                     </div>
    904. 

  904.                     <div class="timeline-item pop-animation interactive-hover">
    905. 

  905.                         <h4>🔥 v20.0 Enterprise Ultimate:</h4>
    906. 

  906.                         <ul>
    907. 

  907.                             <li>Максимальная интерактивность (Глобальные Ripple-эффекты).</li>
    908. 

  908.                             <li>Аппаратный аудио-клиппинг через <code>WaveShaperNode</code>.</li>
    909. 

  909.                             <li>Анимация вспышки фото-затвора при сохранении графика.</li>
    910. 

  910.                             <li>Умное сглаживание графиков через `requestAnimationFrame`.</li>
    911. 

  911.                         </ul>
    912. 

  912.                     </div>
    913. 

  913.                     <div class="timeline-item pop-animation interactive-hover">
    914. 

  914.                         <h4>👑 v19.0 Enterprise Grand Master:</h4>
    915. 

  915.                         <ul>
    916. 

  916.                             <li>Интерактивный SVG-круг прогресса тестирования с анимацией Count-up.</li>
    917. 

  917.                             <li>"Живые" ссылки на Wikipedia в ответах.</li>
    918. 

  918.                             <li>Интерактивный круглый логотип. Новые формулы Доплера.</li>
    919. 

  919.                         </ul>
    920. 

  920.                     </div>
    921. 

  921.                     <div class="timeline-item pop-animation interactive-hover">
    922. 

  922.                         <h4>🔒 v18.0 Security Addition:</h4>
    923. 

  923.                         <ul>
    924. 

  924.                             <li>Интеграция модуля ТЗИ (Акустическая маскировка), генератор белого шума.</li>
    925. 

  925.                             <li>100% перевод интерфейса (i18n). Умный селектор на 30 сред.</li>
    926. 

  926.                             <li>Волновая форма кнопок (18px 6px).</li>
    927. 

  927.                         </ul>
    928. 

  928.                     </div>
    929. 

  929.                     <div class="timeline-item pop-animation interactive-hover">
    930. 

  930.                         <h4>🚀 v1.0 - 16.0 Эволюция:</h4>
    931. 

  931.                         <ul>
    932. 

  932.                             <li>Двуязычная адаптация, раздельный WebAudio.</li>
    933. 

  933.                             <li>Генератор вопросов, Фигуры Лиссажу, базовый синтезатор Фурье.</li>
    934. 

  934.                         </ul>
    935. 

  935.                     </div>
    936. 

  936.                 </div>
    937. 

  937.             </div>
    938. 

  938.         </div>
    939. 

  939.     </div>
    940. 

  940. 

  941.     <script>
    942. 

  942.         let currentLang = 'ru';
    943. 

  943.         let currentPreset = 'sine';
    944. 

  944.         let waves = [{ f: 440, a: 80, p: 0, type: 'sine' }, { f: 880, a: 0, p: 0, type: 'sine' }, { f: 1320, a: 0, p: 0, type: 'sine' }];
    945. 

  945.         let currentWave = 0, freqStep = 100, time = 0, animSpeedMultiplier = 1.0;
    946. 

  946.         let isClipped = false, isAudioOn = false, isPaused = false;
    947. 

  947.         let isGlassOn = true, isGlowOn = false, isGridOn = true, isLissajous = false, showLabels = true;
    948. 

  948.         let waveCtx = null, uiCtx = null, oscillators = [];
    949. 

  949.         let animationFrameId = null, cachedBaseColor = '#2196F3';
    950. 

  950.         const BASE_ANIM_SPEED = 0.08;
    951. 

  951.         let isMaskingTZI = false, noiseSource = null;
    952. 

  952.         let masterGainNode = null, masterWaveShaper = null;
    953. 

  953. 

  954.         // --- УВЕДОМЛЕНИЯ (TOASTS) ---
    955. 

  955.         function showToast(title, text, icon, duration = 6000) {
    956. 

  956.             const container = document.getElementById('toast-container');
    957. 

  957.             if(!container) return;
    958. 

  958.             const toast = document.createElement('div');
    959. 

  959.             toast.className = 'toast';
    960. 

  960.             toast.innerHTML = `<div class="toast-icon emoji-fix">${icon}</div><div class="toast-content"><div class="toast-title">${title}</div><div class="toast-text">${text}</div></div>`;
    961. 

  961.             container.appendChild(toast);
    962. 

  962.             
    963. 

  963.             void toast.offsetWidth; // Reflow
    964. 

  964.             toast.classList.add('show');
    965. 

  965.             playAudioCue('tick');
    966. 

  966. 

  967.             toast.onclick = () => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 500); playAudioCue('click'); };
    968. 

  968.             if(duration > 0) {
    969. 

  969.                 setTimeout(() => {
    970. 

  970.                     if(toast.parentElement) { toast.classList.remove('show'); setTimeout(() => toast.remove(), 500); }
    971. 

  971.                 }, duration);
    972. 

  972.             }
    973. 

  973.         }
    974. 

  974. 

  975.         // --- СТРЕЛОЧКИ ПОДСКАЗОК (ОНБОРДИНГ) ---
    976. 

  976.         function showOnboardingPointers() {
    977. 

  977.             function attach(targetId, text) {
    978. 

  978.                 let target = document.getElementById(targetId);
    979. 

  979.                 if(target && target.style.display !== 'none') {
    980. 

  980.                     let hint = document.createElement('div');
    981. 

  981.                     hint.className = `onboarding-hint`;
    982. 

  982.                     hint.innerHTML = `<div class="onboarding-text">${text}</div><span class="emoji-fix" style="font-size:28px;">⬇️</span>`;
    983. 

  983.                     hint.style.top = '-48px'; hint.style.left = '50%'; hint.style.transform = 'translateX(-50%)';
    984. 

  984.                     target.appendChild(hint);
    985. 

  985.                     target.addEventListener('click', () => { if(hint.parentElement) hint.remove(); }, {once:true});
    986. 

  986.                     setTimeout(() => { if(hint.parentElement) hint.remove(); }, 20000); // Автоудаление
    987. 

  987.                 }
    988. 

  988.             }
    989. 

  989.             setTimeout(() => attach('btnMainSnap', 'Новая анимация!'), 2000);
    990. 

  990.             setTimeout(() => attach('btnTziMode', 'Генератор шума'), 4000);
    991. 

  991.             setTimeout(() => attach('btnMainTestMode', 'Геймификация!'), 6000);
    992. 

  992.         }
    993. 

  993. 

  994.         // --- РЕЙТИНГ ---
    995. 

  995.         function rateApp(stars) {
    996. 

  996.             let msg = currentLang === 'ru' ? `Спасибо за оценку! Вы поставили ${stars} звезд.` : `Thanks for rating! You gave ${stars} stars.`;
    997. 

  997.             showToast("⭐⭐⭐⭐⭐", msg, "🎉", 4000);
    998. 

  998.             playAudioCue('glassBell');
    999. 

  999.         }
    1000. 

  1000. 

  1001.         // --- ГЛОБАЛЬНЫЙ RIPPLE ЭФФЕКТ ДЛЯ МАКСИМАЛЬНОГО ИНТЕРАКТИВА ---
    1002. 

  1002.         document.addEventListener('click', function(e) {
    1003. 

  1003.             if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT' || e.target.classList.contains('toast')) return;
    1004. 

  1004.             const ripple = document.createElement('div');
    1005. 

  1005.             ripple.className = 'global-ripple';
    1006. 

  1006.             ripple.style.left = e.clientX + 'px';
    1007. 

  1007.             ripple.style.top = e.clientY + 'px';
    1008. 

  1008.             document.body.appendChild(ripple);
    1009. 

  1009.             setTimeout(() => ripple.remove(), 600);
    1010. 

  1010.         });
    1011. 

  1011. 

  1012.         const i18n = {
    1013. 

  1013.             ru: {
    1014. 

  1014.                 appTitle: "HarmoniX", appSubtitle: "Интерактивная Лаборатория Волновой Физики", btnStart: "Начать работу",
    1015. 

  1015.                 menuSettings: "Настройки", lblGraphTools: "Инструменты графиков", lblLabels: "Подписи",
    1016. 

  1016.                 lblNeon: "Неон", lblGrid: "Сетка", lblLissajous: "Лиссажу", lblGlass: "Жидкое стекло",
    1017. 

  1017.                 lblPresets: "Пресеты", btnExport: "Экспорт", btnImport: "Импорт", lblTheme: "Оформление",
    1018. 

  1018.                 lblThemeSelect: "10 ТЕМ ОФОРМЛЕНИЯ:", lblCustomBg: "Свои обои:", lblBgFilter: "Фильтр фона:",
    1019. 

  1019.                 btnDelBg: "Сбросить фон", btnMenu: "Меню", btnReload: "Обновить", btnTest: "Тесты", btnFull: "На весь экран", btnExitFull: "Выйти",
    1020. 

  1020.                 pnl1: "1. Базовое колебание", pnl2: "2. Панель Управления", pnl3: "3. Теорема Фурье (Сумма)", pnl4: "4. Спектрограмма",
    1021. 

  1021.                 lblStep: "Шаг частоты:", lblFreq: "Частота (Гц):", lblAmp: "Амплитуда (%):", lblPhase: "Сдвиг фазы (°):", lblSpeed: "Скорость волны:",
    1022. 

  1022.                 btnAudio: "Динамик", btnMute: "Выкл. Звук", btnPause: "Стоп-кадр", btnPlay: "Запуск", btnClip: "Нелинейн. преобр.", btnUnclip: "Выкл. преобр.", btnReset: "Сброс",
    1023. 

  1023.                 btnSine: "Синус", btnSquare: "Меандр", btnTriangle: "Треуг.", btnSaw: "Пила", btnSave: "Сохранить", btnSaveCompact: "Снимок",
    1024. 

  1024.                 eduHeader: "📚 Академия Волновой Механики", eduCard1Title: "〰️ Природа механических волн",
    1025. 

  1025.                 eduCard1Text: "Механическая волна представляет собой процесс распространения колебательного возмущения в упругой среде. При этом частицы среды лишь совершают малые колебания возле равновесия, а переносится исключительно <b>ЭНЕРГИЯ И ИМПУЛЬС</b>.",
    1026. 

  1026.                 eduCard1Params: "Ключевые физические параметры:", eduParam1: "• <b>Период (T):</b> длительность одного полного колебания.", eduParam2: "• <b>Частота (V):</b> число полных циклов за 1 секунду.", eduParam3: "• <b>Циклическая частота (w):</b> угловая скорость изменения фазы.", eduParam4: "• <b>Сдвиг фазы (θ):</b> начальное положение фазового угла.",
    1027. 

  1027.                 eduCard2Title: "📉 Теорема и спектральный анализ Фурье", eduCard2Text1: "В 1822 году Жан-Батист Фурье доказал: <b>ЛЮБОЙ ПЕРИОДИЧЕСКИЙ СИГНАЛ</b> сложной формы может быть разложен в ряд простых гармонических волн кратных частот.",
    1028. 

  1028.                 eduCard2Text2: "Это фундаментальная база цифровой обработки сигналов: от синтезаторов звука и сжатия MP3 до радиопередачи Wi-Fi и сетей 5G.",
    1029. 

  1029.                 calcTitle: "🧮 Калькулятор длины волны", calc2Title: "⏱ Калькулятор Периода", calcCustomMedium: "Свой вариант...",
    1030. 

  1030.                 faqTitle: "💬 Динамические вопросы и ответы (FAQ)",
    1031. 

  1031.                 resTitleRU: "🇷🇺 Российские образовательные платформы",
    1032. 

  1032.                 resTitleINT: "🌍 Международные симуляторы и материалы",
    1033. 

  1033.                 resPhet: "PhET: Волна на струне", resAcademo: "Academo: Интерференция", resFalstad: "Falstad: Синтезатор",
    1034. 

  1034.                 resVirtulab: "VirtuLab: Лаборатории", resInterneturok: "InternetUrok: Физика", resFoxford: "Фоксфорд.Учебник",
    1035. 

  1035.                 testHeader: "Тестирование знаний", testSelectSub: "Выберите режим тестирования:", btnCheck: "Сдать",
    1036. 

  1036.                 modeExp: "Экспресс", time5: "5 (Без таймера)", modeStd: "Стандарт", time15: "15 (5 мин)", modeFull: "Полный курс", time30: "30 (10 мин)", modeUltra: "Ультра Профи", time50: "50 (15 мин)", btnExit: "Выйти", btnTryAgain: "Пройти снова",
    1037. 

  1037.                 telWave: "Волна", telF: "Частота", telA: "Амплитуда", telClip: "Нелинейное", telXAxis: "Ось X", clipOn: "Вкл", clipOff: "Выкл",
    1038. 

  1038.                 lblTelPhase: "Фаза", telY: "Смещение", telSumY: "Σy", telPeaks: "Пики", lblTimeLeft: "Осталось",
    1039. 

  1039.                 navHeader: "Разделы и Инфо", navMain: "Главная панель", navTest: "Итоговое Тестирование", navFormulas: "Справочник формул", navAbout: "О проекте HarmoniX",
    1040. 

  1040.                 lblHeightResize: "Высота холстов графиков:", modalFormulasTitle: "Справочник формул", modalAboutTitle: "О платформе HarmoniX",
    1041. 

  1041.                 modalExtLinks: "🎥 Рекомендованные видеоматериалы:", linkRutube: "Rutube: Лекции по физике", linkVK: "VK Видео: Волны и колебания", linkYT: "YouTube: Лекция Павла Виктора", linkWiki1: "Ряд Фурье (Википедия)",
    1042. 

  1042.                 aboutDescTitle: "ℹ️ Философия проекта", aboutDescText: "HarmoniX — интерактивная вычислительная лаборатория для визуального моделирования волновых процессов, гармонического сложения и анализа спектра Фурье.",
    1043. 

  1043.                 aboutHistoryTitle: "📜 Журнал изменений (Changelog)",
    1044. 

  1044.                 form1: "<b>Уравнение бегущей волны:</b><br> y(x,t) = A · cos(w·t - k·x + θ)", form2: "<b>Гармоническое колебание:</b><br> y(t) = A · cos(w·t + θ)",
    1045. 

  1045.                 form3: "<b>Период и частота:</b><br> T = 1 / V", form4: "<b>Циклическая частота:</b><br> w = 2 · π · V", form5: "<b>Длина волны:</b><br> λ = v / V = v · T",
    1046. 

  1046.                 form6: "<b>Волновое число:</b><br> k = 2 · π / λ", form7: "<b>Эффект Доплера:</b><br> f' = f · (v ± v₀) / (v ∓ vₛ)", form8: "<b>Акустический импеданс:</b><br> Z = ρ · v",
    1047. 

  1047.                 themes: { default: "⚪ Светлая (Базовая)", dark: "⚫ Темная (Ночная)", neon: "🟣 Неон (Киберпанк)", ocean: "🌊 Океан (Глубокая)", forest: "🌲 Лес (Природная)", sunset: "🌅 Закат (Теплая)", cyber: "🟡 Кибер (Желтая)", coffee: "☕ Латте (Кофе)", space: "🌌 Глубокий Космос", sakura: "🌸 Сакура (Розовая)" },
    1048. 

  1048.                 filters: { none: "🚫 Без фильтра", "blur(14px) saturate(140%)": "🌫 Глубокое размытие", "invert(100%)": "💡 Негатив / Инверсия", "contrast(150%) brightness(85%)": "🎬 Кинематограф", "sepia(100%)": "📜 Сепия (Винтаж)" },
    1049. 

  1049.                 hz: "Гц", meters: "м", sec: "с",
    1050. 

  1050.                 tziTitle: "ТЗИ: Виброакустическая защита",
    1051. 

  1051.                 tziDesc: "Активация генератора шума для маскировки речевой информации от средств перехвата:",
    1052. 

  1052.                 btnTziStart: "Активировать маскировку", btnTziStop: "Отключить маскировку",
    1053. 

  1053.                 calcAirDesc: "Среда: Воздух (20°C)", calcSpeedLabel: "Скорость (м/с):", calcCycle: "Длительность 1 цикла (Период):",
    1054. 

  1054.                 hintYellow: "Ищите кружки [?] для подсказок!", btnPickImg: "📂 Выбрать картинку", btnDelBg: "Сбросить фон",
    1055. 

  1055.                 testTimeUp: "⏰ Время вышло! Ответы проверены автоматически.",
    1056. 

  1056.                 testReviewTitle: "Детальный разбор вопросов:", testSkipped: "Пропущен",
    1057. 

  1057.                 testResTitle: "Итоговый результат:", testResOf: "из",
    1058. 

  1058.                 testRes90: "🎉 Превосходно! Уровень эксперта.", testRes60: "👍 Хорошо, курс освоен.", testResLow: "😅 Рекомендуем повторить теорию на сайте.",
    1059. 

  1059.                 omegaLabel: "Цикл. частота (ω):", radS: "рад/с", lblFreqShort: "ν (Гц)", lblPhaseShort: "Фаза",
    1060. 

  1060.                 btnPrev: "Назад", btnNext: "Вперед", qOf: "из", qWord: "Вопрос", wikiLink: "Читать подробнее в Wikipedia", hyperPhysics: "🔗 База знаний HyperPhysics (GSU)",
    1061. 

  1061.                 fConst: "⚛️ Фундаментальные константы", c1: "Скорость света (c)", c2: "Скорость звука (v)", c3: "Число Пи (π)",
    1062. 

  1062.                 telTHD: "THD (Искажения)", telLimit: "Порог среза", toastWelcome: "👋 Добро пожаловать!", toastWelcomeTxt: "HarmoniX v21.0 успешно запущен. Закройте меня кликом.", toastUpdate: "🚀 Что нового?", toastUpdateTxt: "Добавлены смарт-подсказки, система рейтингов и Ripple-анимации.", toastSec: "🛡️ Модуль ТЗИ", toastSecTxt: "Обязательно попробуйте генератор шума внизу страницы!"
    1063. 

  1063.             },
    1064. 

  1064.             en: {
    1065. 

  1065.                 appTitle: "HarmoniX", appSubtitle: "Interactive Wave Physics Laboratory", btnStart: "Start Analysis",
    1066. 

  1066.                 menuSettings: "Settings", lblGraphTools: "Graph Tools", lblLabels: "Labels",
    1067. 

  1067.                 lblNeon: "Neon Glow", lblGrid: "Grid", lblLissajous: "Lissajous", lblGlass: "Liquid Glass",
    1068. 

  1068.                 lblPresets: "Presets", btnExport: "Export", btnImport: "Import", lblTheme: "Themes",
    1069. 

  1069.                 lblThemeSelect: "10 COLOR THEMES:", lblCustomBg: "Custom Wallpaper:", lblBgFilter: "Background Filter:",
    1070. 

  1070.                 btnDelBg: "Reset Wallpaper", btnMenu: "Menu", btnReload: "Reload", btnTest: "Quizzes", btnFull: "Fullscreen", btnExitFull: "Exit",
    1071. 

  1071.                 pnl1: "1. Basic Oscillation", pnl2: "2. Control Panel", pnl3: "3. Fourier Theorem (Sum)", pnl4: "4. Spectrogram",
    1072. 

  1072.                 lblStep: "Frequency Step:", lblFreq: "Frequency (Hz):", lblAmp: "Amplitude (%):", lblPhase: "Phase Shift (°):", lblSpeed: "Wave Speed:",
    1073. 

  1073.                 btnAudio: "Audio", btnMute: "Mute", btnPause: "Pause", btnPlay: "Play", btnClip: "Non-linear Dist.", btnUnclip: "Disable", btnReset: "Reset",
    1074. 

  1074.                 btnSine: "Sine", btnSquare: "Square", btnTriangle: "Triangle", btnSaw: "Sawtooth", btnSave: "Save", btnSaveCompact: "Snap",
    1075. 

  1075.                 eduHeader: "📚 Wave Mechanics Academy", eduCard1Title: "〰 Nature of Mechanical Waves",
    1076. 

  1076.                 eduCard1Text: "A mechanical wave propagates oscillatory disturbances in an elastic medium, transferring energy without mass transfer.",
    1077. 

  1077.                 eduCard1Params: "Key physical parameters:", eduParam1: "• <b>Period (T):</b> time of one full oscillation.", eduParam2: "• <b>Frequency (V):</b> number of full cycles per 1 second.", eduParam3: "• <b>Angular frequency (w):</b> angular rate of phase change.", eduParam4: "• <b>Phase shift (θ):</b> initial displacement of the phase angle.",
    1078. 

  1078.                 eduCard2Title: "📉 Fourier Theorem & Analysis", eduCard2Text1: "Any complex periodic signal can be represented as an exact sum of harmonic sine waves.",
    1079. 

  1079.                 eduCard2Text2: "This is the basis of all digital signal processing: from audio equalization to data packet transmission over Wi-Fi and 5G cellular networks.",
    1080. 

  1080.                 calcTitle: "🧮 Wavelength Calculator", calc2Title: "⏱ Period Calculator", calcCustomMedium: "Custom...",
    1081. 

  1081.                 faqTitle: "💬 Dynamic Questions and Answers (FAQ)",
    1082. 

  1082.                 resTitleRU: "🇷🇺 Russian Educational Platforms",
    1083. 

  1083.                 resTitleINT: "🌍 International Simulators",
    1084. 

  1084.                 resPhet: "PhET: Wave on a String", resAcademo: "Academo: Wave Interference", resFalstad: "Falstad: Synth",
    1085. 

  1085.                 resVirtulab: "VirtuLab: Science Labs", resInterneturok: "InternetUrok: Physics", resFoxford: "Foxford Tutorials",
    1086. 

  1086.                 testHeader: "Knowledge Testing", testSelectSub: "Select test mode:", btnCheck: "Submit",
    1087. 

  1087.                 modeExp: "Express", time5: "5 (No timer)", modeStd: "Standard", time15: "15 (5 min)", modeFull: "Full Course", time30: "30 (10 min)", modeUltra: "Ultra Pro", time50: "50 (15 min)", btnExit: "Exit", btnTryAgain: "Try Again",
    1088. 

  1088.                 telWave: "Wave", telF: "Frequency", telA: "Amplitude", telClip: "Non-linear", telXAxis: "X Axis", clipOn: "ON", clipOff: "OFF",
    1089. 

  1089.                 lblTelPhase: "Phase", telY: "Displacement", telSumY: "Σy", telPeaks: "Peaks", lblTimeLeft: "Time left",
    1090. 

  1090.                 navHeader: "Sections & Info", navMain: "Dashboard", navTest: "Testing Quiz", navFormulas: "Formulas Reference", navAbout: "About HarmoniX",
    1091. 

  1091.                 lblHeightResize: "Canvas Height:", modalFormulasTitle: "Formulas Reference", modalAboutTitle: "About HarmoniX Platform",
    1092. 

  1092.                 modalExtLinks: "🎥 Recommended Videos:", linkRutube: "Rutube: Wave Physics Lectures", linkVK: "VK Video: Waves & Oscillations", linkYT: "YouTube: Pavel Victor Lesson", linkWiki1: "Fourier Series (Wikipedia)",
    1093. 

  1093.                 aboutDescTitle: "ℹ️ Philosophy of the Project", aboutDescText: "HarmoniX is an interactive simulation suite for visual wave physics, superposition, and Fourier analysis.",
    1094. 

  1094.                 aboutHistoryTitle: "📜 Changelog",
    1095. 

  1095.                 form1: "<b>Traveling Wave Eq:</b><br> y(x,t) = A · cos(w·t - k·x + θ)", form2: "<b>Harmonic Oscillation:</b><br> y(t) = A · cos(w·t + θ)",
    1096. 

  1096.                 form3: "<b>Period & Frequency:</b><br> T = 1 / V", form4: "<b>Angular Frequency:</b><br> w = 2 · π · V", form5: "<b>Wavelength:</b><br> λ = v / V = v · T",
    1097. 

  1097.                 form6: "<b>Wave Number:</b><br> k = 2 · π / λ", form7: "<b>Doppler Effect:</b><br> f' = f · (v ± v₀) / (v ∓ vₛ)", form8: "<b>Acoustic Impedance:</b><br> Z = ρ · v",
    1098. 

  1098.                 themes: { default: "⚪ Light (Default)", dark: "⚫ Dark (Night)", neon: "🟣 Neon (Cyberpunk)", ocean: "🌊 Ocean (Deep)", forest: "🌲 Forest (Natural)", sunset: "🌅 Sunset (Warm)", cyber: "🟡 Cyber (Yellow)", coffee: "☕ Latte (Coffee)", space: "🌌 Deep Space", sakura: "🌸 Sakura (Pink)" },
    1099. 

  1099.                 filters: { none: "🚫 No Filter", "blur(14px) saturate(140%)": "🌫 Deep Blur", "invert(100%)": "💡 Invert / Negative", "contrast(150%) brightness(85%)": "🎬 Cinematic", "sepia(100%)": "📜 Vintage Sepia" },
    1100. 

  1100.                 hz: "Hz", meters: "m", sec: "s",
    1101. 

  1101.                 tziTitle: "InfoSec: Acoustic Protection",
    1102. 

  1102.                 tziDesc: "Activation of white noise generator for speech masking against interception:",
    1103. 

  1103.                 btnTziStart: "Activate Masking", btnTziStop: "Disable Masking",
    1104. 

  1104.                 calcAirDesc: "Medium: Air (20°C)", calcSpeedLabel: "Speed (m/s):", calcCycle: "1-Cycle Duration (Period):",
    1105. 

  1105.                 hintYellow: "Look for yellow [?] circles for hints!", btnPickImg: "📂 Choose Picture", btnDelBg: "Reset Wallpaper",
    1106. 

  1106.                 testTimeUp: "⏰ Time is up! Answers were checked automatically.",
    1107. 

  1107.                 testReviewTitle: "Detailed Questions Review:", testSkipped: "Skipped",
    1108. 

  1108.                 testResTitle: "Final Result:", testResOf: "out of",
    1109. 

  1109.                 testRes90: "🎉 Excellent! Expert level.", testRes60: "👍 Good, solid knowledge.", testResLow: "😅 We recommend reviewing the theory on the site.",
    1110. 

  1110.                 omegaLabel: "Angular Freq (ω):", radS: "rad/s", lblFreqShort: "ν (Hz)", lblPhaseShort: "Phase",
    1111. 

  1111.                 btnPrev: "Back", btnNext: "Next", qOf: "of", qWord: "Question", wikiLink: "Read more on Wikipedia", hyperPhysics: "🔗 HyperPhysics Database (GSU)",
    1112. 

  1112.                 fConst: "⚛️ Fundamental constants", c1: "Speed of light (c)", c2: "Speed of sound (v)", c3: "Pi Number (π)",
    1113. 

  1113.                 telTHD: "THD (Distortion)", telLimit: "Clip Limit", toastWelcome: "👋 Welcome!", toastWelcomeTxt: "HarmoniX v21.0 is online.", toastUpdate: "🚀 What's New?", toastUpdateTxt: "Added smart toasts, star rating and new pointer animations.", toastSec: "🛡️ InfoSec Module", toastSecTxt: "Try the acoustic noise generator below!"
    1114. 

  1114.             }
    1115. 

  1115.         };
    1116. 

  1116. 

  1117.         const globalFaqData = {
    1118. 

  1118.             ru: [
    1119. 

  1119.                 { q: "Что такое Фигуры Лиссажу (Осциллограф X-Y)?", a: "Это <b>замкнутые траектории</b>, прочерчиваемые точкой, совершающей одновременно два гармонических колебания во <b>взаимно перпендикулярных направлениях</b>. Включите этот режим кнопкой «Лиссажу» в меню! <br><br><a href='https://ru.wikipedia.org/wiki/%D0%A4%D0%B8%D0%B3%D1%83%D1%80%D1%8B_%D0%9B%D0%B8%D1%81%D1%81%D0%B0%D0%B6%D1%83' target='_blank' class='faq-link'>Узнать подробнее (Википедия)</a>" },
    1120. 

  1120.                 { q: "Как фазовый сдвиг влияет на интерференцию?", a: "При сдвиге 0° волны <b>синфазны</b> и возникает <span class='key-term'>конструктивная интерференция</span> (усиление). Если сдвиг 180° (противофаза) — волны взаимно гасятся. Этот эффект используется в системах активного шумоподавления (ANC)." },
    1121. 

  1121.                 { q: "Что происходит со спектром при нелинейном ограничении (клиппинге)?", a: "При клиппинге верхушки синусоиды срезаются, приближая сигнал к прямоугольной форме (меандру). Это рождает <span class='key-term'>бесконечное число нечетных паразитных гармоник</span>, которые ярко видны в спектрограмме." },
    1122. 

  1122.                 { q: "Что показывает теорема Фурье?", a: "Она доказывает, что любой сложный, но периодический сигнал можно точно собрать (синтезировать) из набора <b>простых бесконечных синусоид</b> разных частот и амплитуд." },
    1123. 

  1123.                 { q: "От чего зависит скорость волны?", a: "Скорость механической волны зависит исключительно от свойств среды (ее плотности, упругости, температуры). В воздухе это ~340 м/с, в воде ~1480 м/с, в стали почти <b>6000 м/с</b>!" },
    1124. 

  1124.                 { q: "Что такое Акустическая маскировка (ТЗИ)?", a: "<b>Техническая защита информации (ТЗИ)</b> в акустике включает генерацию виброакустического белого шума, маскирующего речевую информацию от подслушивания через окна, стены и вентиляцию." },
    1125. 

  1125.                 { q: "Почему звуковая волна не переносит вещество?", a: "Потому что частицы среды совершают лишь малые колебательные движения возле своего положения равновесия, сталкиваясь с соседями и передавая им только энергию (импульс)." },
    1126. 

  1126.                 { q: "В чем разница между продольной и поперечной волной?", a: "В поперечной волне частицы колеблются <b>перпендикулярно</b> направлению движения волны (волна на струне). В продольной — <b>вдоль</b> направления волны (звук в воздухе)." }
    1127. 

  1127.             ],
    1128. 

  1128.             en: [
    1129. 

  1129.                 { q: "What are Lissajous Figures (X-Y Oscilloscope)?", a: "These are <b>closed trajectories</b> drawn by a point undergoing two harmonic oscillations in mutually perpendicular directions. Toggle it via the «Lissajous» menu button! <br><br><a href='https://en.wikipedia.org/wiki/Lissajous_curve' target='_blank' class='faq-link'>Read more (Wikipedia)</a>" },
    1130. 

  1130.                 { q: "How does phase shift affect interference?", a: "At 0° shift waves are <b>in-phase</b> creating <span class='key-term'>constructive interference</span> (amplification). 180° causes complete destructive interference (cancellation, ANC technology)." },
    1131. 

  1131.                 { q: "What happens to the spectrum during non-linear clipping?", a: "Clipping shears sine peaks into a square profile, yielding an <span class='key-term'>infinite train of odd harmonic spikes</span>." },
    1132. 

  1132.                 { q: "What does Fourier's theorem prove?", a: "It proves any periodic wave can be synthesized from a discrete harmonic series of <b>pure sine waves</b>." },
    1133. 

  1133.                 { q: "What determines wave propagation speed?", a: "Medium elasticity and density exclusively: ~340 m/s in air, ~1480 m/s in water, <b>~5900 m/s</b> in steel." },
    1134. 

  1134.                 { q: "What is Acoustic Masking (InfoSec)?", a: "<b>Information Security</b> in acoustics uses active vibroacoustic white noise generators to mask human speech from optical, laser, and vibration bugs." },
    1135. 

  1135.                 { q: "Why don't sound waves transport mass?", a: "Particles oscillate purely locally around equilibrium points, transferring momentum elastically." },
    1136. 

  1136.                 { q: "Transverse vs. Longitudinal waves?", a: "In transverse waves, particle displacement is perpendicular to wave propagation. In longitudinal waves, it's parallel." }
    1137. 

  1137.             ]
    1138. 

  1138.         };
    1139. 

  1139. 

  1140.         const mediaList = [
    1141. 

  1141.             { ru: "Воздух (20°C)", en: "Air (20°C)", v: 343 }, { ru: "Воздух (0°C)", en: "Air (0°C)", v: 331 },
    1142. 

  1142.             { ru: "Гелий", en: "Helium", v: 965 }, { ru: "Водород", en: "Hydrogen", v: 1284 },
    1143. 

  1143.             { ru: "Углекислый газ", en: "Carbon Dioxide", v: 259 }, { ru: "Вода (Пресная)", en: "Fresh Water", v: 1480 },
    1144. 

  1144.             { ru: "Морская вода", en: "Sea Water", v: 1530 }, { ru: "Керосин", en: "Kerosene", v: 1324 },
    1145. 

  1145.             { ru: "Ртуть", en: "Mercury", v: 1450 }, { ru: "Глицерин", en: "Glycerol", v: 1904 },
    1146. 

  1146.             { ru: "Свинец", en: "Lead", v: 2160 }, { ru: "Золото", en: "Gold", v: 3240 },
    1147. 

  1147.             { ru: "Серебро", en: "Silver", v: 2680 }, { ru: "Лед", en: "Ice", v: 3980 },
    1148. 

  1148.             { ru: "Дерево (Сосна)", en: "Pine Wood", v: 3320 }, { ru: "Дерево (Дуб)", en: "Oak Wood", v: 4000 },
    1149. 

  1149.             { ru: "Кирпич", en: "Brick", v: 4180 }, { ru: "Бетон", en: "Concrete", v: 4250 },
    1150. 

  1150.             { ru: "Медь", en: "Copper", v: 4700 }, { ru: "Стекло (Оконное)", en: "Window Glass", v: 5640 },
    1151. 

  1151.             { ru: "Стекло (Кварцевое)", en: "Quartz Glass", v: 5370 }, { ru: "Сталь", en: "Steel", v: 5900 },
    1152. 

  1152.             { ru: "Чугун", en: "Cast Iron", v: 4480 }, { ru: "Железо", en: "Iron", v: 5950 },
    1153. 

  1153.             { ru: "Алюминий", en: "Aluminum", v: 6420 }, { ru: "Титановый сплав", en: "Titanium Alloy", v: 6070 },
    1154. 

  1154.             { ru: "Бериллий", en: "Beryllium", v: 12890 }, { ru: "Резина", en: "Rubber", v: 150 },
    1155. 

  1155.             { ru: "Пробка", en: "Cork", v: 500 }, { ru: "Алмаз", en: "Diamond", v: 12000 }
    1156. 

  1156.         ];
    1157. 

  1157. 

  1158.         function toggleTZI() {
    1159. 

  1159.             isMaskingTZI = !isMaskingTZI;
    1160. 

  1160.             let btn = document.getElementById('btnTziMode');
    1161. 

  1161.             if (btn) {
    1162. 

  1162.                 if (isMaskingTZI) {
    1163. 

  1163.                     btn.innerHTML = `<span class="emoji-fix">🔓</span> <span data-i18n="btnTziStop">${i18n[currentLang].btnTziStop}</span>`;
    1164. 

  1164.                     btn.style.background = '#F44336'; btn.style.boxShadow = '0 0 15px rgba(244,67,54,0.5)';
    1165. 

  1165.                     startNoise(); playAudioCue('warn');
    1166. 

  1166.                 } else {
    1167. 

  1167.                     btn.innerHTML = `<span class="emoji-fix">🔒</span> <span data-i18n="btnTziStart">${i18n[currentLang].btnTziStart}</span>`;
    1168. 

  1168.                     btn.style.background = 'var(--tzi-color)'; btn.style.boxShadow = '0 0 15px var(--tzi-glow)';
    1169. 

  1169.                     stopNoise(); playAudioCue('mainPulse');
    1170. 

  1170.                 }
    1171. 

  1171.             }
    1172. 

  1172.         }
    1173. 

  1173. 

  1174.         function startNoise() {
    1175. 

  1175.             if (!waveCtx) initAudio(); if (!waveCtx) return;
    1176. 

  1176.             const bufferSize = waveCtx.sampleRate * 2; const buffer = waveCtx.createBuffer(1, bufferSize, waveCtx.sampleRate); const data = buffer.getChannelData(0);
    1177. 

  1177.             for (let i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; }
    1178. 

  1178.             noiseSource = waveCtx.createBufferSource(); noiseSource.buffer = buffer; noiseSource.loop = true;
    1179. 

  1179.             let noiseGain = waveCtx.createGain(); noiseGain.gain.value = 0.08; 
    1180. 

  1180.             noiseSource.connect(noiseGain); noiseGain.connect(waveCtx.destination); noiseSource.start();
    1181. 

  1181.         }
    1182. 

  1182. 

  1183.         function stopNoise() { if (noiseSource) { try { noiseSource.stop(); noiseSource.disconnect(); } catch(e){} noiseSource = null; } }
    1184. 

  1184. 

  1185.         function makeDistortionCurve(amount) {
    1186. 

  1186.             let n_samples = 44100;
    1187. 

  1187.             let curve = new Float32Array(n_samples);
    1188. 

  1188.             for (let i = 0; i < n_samples; ++i) {
    1189. 

  1189.                 let x = i * 2 / n_samples - 1;
    1190. 

  1190.                 curve[i] = x < -0.5 ? -0.5 : (x > 0.5 ? 0.5 : x);
    1191. 

  1191.             }
    1192. 

  1192.             return curve;
    1193. 

  1193.         }
    1194. 

  1194. 

  1195.         function initAudio() {
    1196. 

  1196.             if (!uiCtx) uiCtx = new (window.AudioContext || window.webkitAudioContext)();
    1197. 

  1197.             if (uiCtx.state === 'suspended') uiCtx.resume();
    1198. 

  1198.             if (!waveCtx) {
    1199. 

  1199.                 waveCtx = new (window.AudioContext || window.webkitAudioContext)();
    1200. 

  1200.                 
    1201. 

  1201.                 masterGainNode = waveCtx.createGain();
    1202. 

  1202.                 masterWaveShaper = waveCtx.createWaveShaper();
    1203. 

  1203.                 masterWaveShaper.curve = null;
    1204. 

  1204.                 masterWaveShaper.oversample = '4x';
    1205. 

  1205.                 
    1206. 

  1206.                 masterGainNode.connect(masterWaveShaper);
    1207. 

  1207.                 masterWaveShaper.connect(waveCtx.destination);
    1208. 

  1208. 

  1209.                 for (let i = 0; i < 3; i++) {
    1210. 

  1210.                     let osc = waveCtx.createOscillator(); let gain = waveCtx.createGain();
    1211. 

  1211.                     osc.type = 'sine'; osc.frequency.setValueAtTime(waves[i].f, waveCtx.currentTime);
    1212. 

  1212.                     gain.gain.setValueAtTime(0, waveCtx.currentTime); osc.connect(gain);
    1213. 

  1213.                     gain.connect(masterGainNode); osc.start(); oscillators.push({ osc: osc, gain: gain });
    1214. 

  1214.                 }
    1215. 

  1215.             }
    1216. 

  1216.             if (waveCtx.state === 'suspended') waveCtx.resume();
    1217. 

  1217.         }
    1218. 

  1218. 

  1219.         function startApp() {
    1220. 

  1220.             try { initAudio(); } catch(e){}
    1221. 

  1221.             let ws = document.getElementById('welcome-screen');
    1222. 

  1222.             let mainNav = document.getElementById('main-nav-bar');
    1223. 

  1223.             let mainApp = document.getElementById('main-app');
    1224. 

  1224. 

  1225.             if(ws) { ws.style.opacity = '0'; ws.style.pointerEvents = 'none'; }
    1226. 

  1226.             setTimeout(() => {
    1227. 

  1227.                 if(ws) ws.style.display = 'none';
    1228. 

  1228.                 if(mainNav) mainNav.style.display = 'flex';
    1229. 

  1229.                 if(mainApp) mainApp.style.display = 'flex';
    1230. 

  1230. 

  1231.                 try { buildSelectOptions(); } catch(e){}
    1232. 

  1232.                 try { setLang('ru'); } catch(e){}
    1233. 

  1233.                 try { setPreset('sine'); } catch(e){}
    1234. 

  1234. 

  1235.                 setTimeout(() => {
    1236. 

  1236.                     try { resizeAllCanvases(); } catch(e){}
    1237. 

  1237.                     if (!animationFrameId) { draw(); }
    1238. 

  1238.                     try { populateMediumSelect(currentLang); } catch(e){}
    1239. 

  1239.                     try { calculateWaveLength(); } catch(e){}
    1240. 

  1240.                     try { playAudioCue('glassBell'); } catch(e){}
    1241. 

  1241.                     
    1242. 

  1242.                     // ЗАПУСК СИСТЕМЫ УВЕДОМЛЕНИЙ ПРИ СТАРТЕ
    1243. 

  1243.                     setTimeout(() => showToast(i18n[currentLang].toastWelcome, i18n[currentLang].toastWelcomeTxt, "✨"), 1000);
    1244. 

  1244.                     setTimeout(() => showToast(i18n[currentLang].toastUpdate, i18n[currentLang].toastUpdateTxt, "🔥"), 4500);
    1245. 

  1245.                     setTimeout(() => showToast(i18n[currentLang].toastSec, i18n[currentLang].toastSecTxt, "💡"), 9000);
    1246. 

  1246.                     showOnboardingPointers();
    1247. 

  1247.                 }, 50);
    1248. 

  1248.             }, 300);
    1249. 

  1249.         }
    1250. 

  1250. 

  1251.         function playAudioCue(type, param = 0) {
    1252. 

  1252.             try {
    1253. 

  1253.                 if (!uiCtx) return;
    1254. 

  1254.                 const now = uiCtx.currentTime; const osc = uiCtx.createOscillator(); const gain = uiCtx.createGain();
    1255. 

  1255.                 osc.connect(gain); gain.connect(uiCtx.destination);
    1256. 

  1256. 

  1257.                 if (type === 'glassBell') { osc.type = 'sine'; osc.frequency.setValueAtTime(1400, now); osc.frequency.exponentialRampToValueAtTime(1900, now + 0.12); gain.gain.setValueAtTime(0.06, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.18); osc.start(now); osc.stop(now + 0.18); }
    1258. 

  1258.                 else if (type === 'mainPulse') { osc.type = 'triangle'; osc.frequency.setValueAtTime(260, now); osc.frequency.exponentialRampToValueAtTime(480, now + 0.09); gain.gain.setValueAtTime(0.12, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.12); osc.start(now); osc.stop(now + 0.12); }
    1259. 

  1259.                 else if (type === 'sliderTone') { osc.type = 'sine'; let f = 300 + (param * 10); osc.frequency.setValueAtTime(Math.min(2500, f), now); gain.gain.setValueAtTime(0.04, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.05); osc.start(now); osc.stop(now + 0.05); }
    1260. 

  1260.                 else if (type === 'phaseTone') { osc.type = 'triangle'; let f = 180 + (param * 1.5); osc.frequency.setValueAtTime(f, now); gain.gain.setValueAtTime(0.05, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.06); osc.start(now); osc.stop(now + 0.06); }
    1261. 

  1261.                 else if (type === 'calcKey') { osc.type = 'sawtooth'; osc.frequency.setValueAtTime(950, now); osc.frequency.exponentialRampToValueAtTime(200, now + 0.04); gain.gain.setValueAtTime(0.04, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.04); osc.start(now); osc.stop(now + 0.04); }
    1262. 

  1262.                 else if (type === 'menuClick') { osc.type = 'sine'; osc.frequency.setValueAtTime(750, now); gain.gain.setValueAtTime(0.06, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.08); osc.start(now); osc.stop(now + 0.08); }
    1263. 

  1263.                 else if (type === 'cameraSnap') { osc.type = 'square'; osc.frequency.setValueAtTime(800, now); osc.frequency.exponentialRampToValueAtTime(100, now + 0.1); gain.gain.setValueAtTime(0.15, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.1); osc.start(now); osc.stop(now + 0.1); }
    1264. 

  1264.                 else if (type === 'tick') { osc.type = 'sine'; osc.frequency.setValueAtTime(1000, now); gain.gain.setValueAtTime(0.03, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.05); osc.start(now); osc.stop(now + 0.05); }
    1265. 

  1265.                 else if (type === 'warn') { osc.type = 'square'; osc.frequency.setValueAtTime(400, now); osc.frequency.setValueAtTime(300, now + 0.1); gain.gain.setValueAtTime(0.05, now); gain.gain.exponentialRampToValueAtTime(0.001, now + 0.3); osc.start(now); osc.stop(now + 0.3); }
    1266. 

  1266.             } catch(e) {}
    1267. 

  1267.         }
    1268. 

  1268. 

  1269.         window.playSfx = playAudioCue;
    1270. 

  1270. 

  1271.         document.addEventListener('mouseover', e => {
    1272. 

  1272.             if (e.target.classList && e.target.classList.contains('hint-icon')) {
    1273. 

  1273.                 const tt = document.getElementById('global-tooltip'); if(!tt) return;
    1274. 

  1274.                 let hintKey = e.target.getAttribute('data-i18n-hint');
    1275. 

  1275.                 if(hintKey && i18n[currentLang][hintKey]) { tt.innerHTML = i18n[currentLang][hintKey]; } 
    1276. 

  1276.                 else { tt.innerHTML = e.target.getAttribute('data-hint'); }
    1277. 

  1277.                 tt.style.opacity = 1; const rect = e.target.getBoundingClientRect();
    1278. 

  1278.                 let x = rect.left + rect.width / 2 - tt.offsetWidth / 2; let y = rect.top - tt.offsetHeight - 12;
    1279. 

  1279.                 if (x < 10) x = 10; if (x + tt.offsetWidth > window.innerWidth - 10) x = window.innerWidth - tt.offsetWidth - 10;
    1280. 

  1280.                 if (y < 10) y = rect.bottom + 12; tt.style.transform = `translate(${x}px, ${y}px)`; playAudioCue('hover');
    1281. 

  1281.             }
    1282. 

  1282.         }, true);
    1283. 

  1283. 

  1284.         document.addEventListener('mouseout', e => {
    1285. 

  1285.             if (e.target.classList && e.target.classList.contains('hint-icon')) { const tt = document.getElementById('global-tooltip'); if(tt) tt.style.opacity = 0; }
    1286. 

  1286.         }, true);
    1287. 

  1287. 

  1288.         function buildSelectOptions() {
    1289. 

  1289.             const curTheme = document.documentElement.getAttribute('data-theme') || 'default';
    1290. 

  1290.             const themeSel = document.getElementById('themeSelect');
    1291. 

  1291.             if (themeSel) { themeSel.innerHTML = ''; for (let k in i18n[currentLang].themes) { let opt = document.createElement('option'); opt.value = k; opt.innerHTML = i18n[currentLang].themes[k]; if (k === curTheme) opt.selected = true; themeSel.appendChild(opt); } }
    1292. 

  1292.             const filterSel = document.getElementById('bgFilter');
    1293. 

  1293.             if (filterSel) { const curFilter = document.getElementById('bg-layer').style.filter || 'none'; filterSel.innerHTML = ''; for (let f in i18n[currentLang].filters) { let opt = document.createElement('option'); opt.value = f; opt.innerHTML = i18n[currentLang].filters[f]; if (f === curFilter) opt.selected = true; filterSel.appendChild(opt); } }
    1294. 

  1294.         }
    1295. 

  1295. 

  1296.         function safeSetText(id, text) { let el = document.getElementById(id); if (el) el.innerText = text; }
    1297. 

  1297. 

  1298.         function renderDynamicFAQ(lang) {
    1299. 

  1299.             const container = document.getElementById('dynamic-faq-container'); if(!container) return; container.innerHTML = '';
    1300. 

  1300.             let pool = globalFaqData[lang] || globalFaqData['ru']; let shuffled = pool.sort(() => 0.5 - Math.random()).slice(0, 4);
    1301. 

  1301.             shuffled.forEach(item => {
    1302. 

  1302.                 let btn = document.createElement('button'); btn.className = 'accordion-btn glass-element interactive-hover btn-shine'; btn.onclick = function() { toggleAccordion(this); playAudioCue('menuClick'); };
    1303. 

  1303.                 btn.innerHTML = `<span>${item.q}</span> <span>▼</span>`;
    1304. 

  1304.                 let content = document.createElement('div'); content.className = 'accordion-content'; content.innerHTML = `<p>${item.a}</p>`;
    1305. 

  1305.                 container.appendChild(btn); container.appendChild(content);
    1306. 

  1306.             });
    1307. 

  1307.         }
    1308. 

  1308. 

  1309.         function populateMediumSelect(lang) {
    1310. 

  1310.             const sel = document.getElementById('mediumSelect'); if(!sel) return;
    1311. 

  1311.             sel.innerHTML = `<option value="custom" data-i18n="calcCustomMedium">${i18n[lang].calcCustomMedium}</option>`;
    1312. 

  1312.             mediaList.forEach(m => { let opt = document.createElement('option'); opt.value = m.v; opt.innerText = `${m[lang] || m.ru} (${m.v})`; sel.appendChild(opt); });
    1313. 

  1313.             let inpVal = document.getElementById('calcSpeedCustom').value; let found = Array.from(sel.options).find(o => o.value == inpVal);
    1314. 

  1314.             sel.value = found ? found.value : 'custom';
    1315. 

  1315.         }
    1316. 

  1316. 

  1317.         function setLang(lang) {
    1318. 

  1318.             currentLang = lang;
    1319. 

  1319.             document.querySelectorAll('.lang-btn').forEach(btn => btn.classList.remove('active'));
    1320. 

  1320.             let activeLangBtn = document.querySelector('.lang-' + lang); if(activeLangBtn) activeLangBtn.classList.add('active');
    1321. 

  1321.             
    1322. 

  1322.             document.querySelectorAll('[data-i18n]').forEach(el => { const key = el.getAttribute('data-i18n'); if (i18n[lang][key]) el.innerHTML = i18n[lang][key]; });
    1323. 

  1323.             document.querySelectorAll('.unit-freq').forEach(el => { el.innerText = i18n[lang].hz; });
    1324. 

  1324.             document.querySelectorAll('.calc-m').forEach(el => { el.innerText = i18n[lang].meters || 'м'; });
    1325. 

  1325.             document.querySelectorAll('.calc-s').forEach(el => { el.innerText = i18n[lang].sec || 'с'; });
    1326. 

  1326.             
    1327. 

  1327.             let btnTZI = document.getElementById('btnTziMode');
    1328. 

  1328.             if(btnTZI) { btnTZI.innerHTML = `<span class="emoji-fix">🔒</span> ${isMaskingTZI ? i18n[lang].btnTziStop : i18n[lang].btnTziStart}`; }
    1329. 

  1329. 

  1330.             buildSelectOptions(); updateDynamicButtons(); updateTelemetryUI(); populateMediumSelect(lang); calculateWaveLength(); renderDynamicFAQ(lang);
    1331. 

  1331.             if (typeof updateQuizStepIndicator === 'function') { updateQuizStepIndicator(); }
    1332. 

  1332.         }
    1333. 

  1333. 

  1334.         function updateDynamicButtons() {
    1335. 

  1335.             const btnTop = document.getElementById('btnTopLabels'); const btnSide = document.getElementById('btnLabelsToggle');
    1336. 

  1336.             const txtLab = currentLang === 'ru' ? (showLabels ? 'Подписи: Вкл' : 'Подписи: Выкл') : (showLabels ? 'Labels: On' : 'Labels: Off');
    1337. 

  1337.             if (btnTop) btnTop.innerHTML = `<span class="emoji-fix">📊</span> ${showLabels ? (currentLang==='ru'?'Подписи':'Labels') : (currentLang==='ru'?'Без подписей':'No Labels')}`;
    1338. 

  1338.             if (btnSide) { btnSide.innerHTML = txtLab; btnSide.classList.toggle('active', showLabels); }
    1339. 

  1339. 

  1340.             const btnGlow = document.getElementById('btnGlowToggle');
    1341. 

  1341.             if (btnGlow) { btnGlow.innerHTML = currentLang === 'ru' ? (isGlowOn ? 'Неон: Вкл' : 'Неон: Выкл') : (isGlowOn ? 'Neon: On' : 'Neon: Off'); btnGlow.classList.toggle('active', isGlowOn); }
    1342. 

  1342. 

  1343.             const btnGrid = document.getElementById('btnGridToggle');
    1344. 

  1344.             if (btnGrid) { btnGrid.innerHTML = currentLang === 'ru' ? (isGridOn ? '<span class="emoji-fix">🕸</span> Сетка: Вкл' : '<span class="emoji-fix">🕸</span> Сетка: Выкл') : (isGridOn ? '<span class="emoji-fix">🕸</span> Grid: On' : '<span class="emoji-fix">🕸</span> Grid: Off'); btnGrid.classList.toggle('active', isGridOn); }
    1345. 

  1345. 

  1346.             const btnLis = document.getElementById('btnLissajous');
    1347. 

  1347.             if (btnLis) { btnLis.innerHTML = currentLang === 'ru' ? (isLissajous ? '<span class="emoji-fix">🌀</span> Лиссажу: Вкл' : '<span class="emoji-fix">🌀</span> Лиссажу: Выкл') : (isLissajous ? '<span class="emoji-fix">🌀</span> Lissajous: On' : '<span class="emoji-fix">🌀</span> Lissajous: Off'); btnLis.classList.toggle('active', isLissajous); }
    1348. 

  1348. 

  1349.             let btnAudio = document.getElementById('btnAudio');
    1350. 

  1350.             if (btnAudio) { btnAudio.classList.toggle('active', isAudioOn); btnAudio.innerHTML = isAudioOn ? `<span class="emoji-fix">🔇</span> ${i18n[currentLang].btnMute}` : `<span class="emoji-fix">🔊</span> ${i18n[currentLang].btnAudio}`; }
    1351. 

  1351. 

  1352.             let btnPause = document.getElementById('btnPause');
    1353. 

  1353.             if (btnPause) { btnPause.classList.toggle('active', isPaused); btnPause.innerHTML = isPaused ? `<span class="emoji-fix">▶</span> ${i18n[currentLang].btnPlay}` : `<span class="emoji-fix">⏸</span> ${i18n[currentLang].btnPause}`; }
    1354. 

  1354. 

  1355.             let btnClip = document.getElementById('btnClip');
    1356. 

  1356.             if (btnClip) { btnClip.classList.toggle('active', isClipped); btnClip.querySelector('span:last-child').previousElementSibling.innerHTML = isClipped ? i18n[currentLang].btnUnclip : i18n[currentLang].btnClip; }
    1357. 

  1357.         }
    1358. 

  1358. 

  1359.         function updateSpeedValue(val) { animSpeedMultiplier = parseFloat(val) || 1.0; let el = document.getElementById('valSpeedDisp'); if(el) el.innerText = animSpeedMultiplier.toFixed(1) + "x"; playAudioCue('phaseTone', animSpeedMultiplier * 100); }
    1360. 

  1360.         function setCanvasHeight(val) { document.querySelectorAll('.canvas-wrapper').forEach(w => { w.style.height = val + 'px'; }); resizeAllCanvases(); }
    1361. 

  1361.         function toggleLabels() { showLabels = !showLabels; document.querySelectorAll('.chart-telemetry').forEach(el => { if(el) el.classList.toggle('hidden', !showLabels); }); const btnSide = document.getElementById('btnLabelsToggle'); if (btnSide) { btnSide.classList.toggle('active', showLabels); } updateDynamicButtons(); playAudioCue('click'); }
    1362. 

  1362.         function toggleGlow() { isGlowOn = !isGlowOn; updateDynamicButtons(); playAudioCue('click'); }
    1363. 

  1363.         function toggleGrid() { isGridOn = !isGridOn; updateDynamicButtons(); playAudioCue('click'); }
    1364. 

  1364.         function toggleLissajous() { isLissajous = !isLissajous; let lm = document.getElementById('lblLisMode'); if (lm) lm.innerText = isLissajous ? "(Lissajous 2D)" : ""; updateDynamicButtons(); playAudioCue('mainPulse'); }
    1365. 

  1365.         function setGlassState(state) { isGlassOn = state; let onBtn = document.getElementById('btnGOn'); let offBtn = document.getElementById('btnGOff'); if(onBtn && offBtn) { onBtn.classList.toggle('active', state); offBtn.classList.toggle('active', !state); } updateGlassIntensity(); playAudioCue('click'); }
    1366. 

  1366.         
    1367. 

  1367.         function updateGlassIntensity() {
    1368. 

  1368.             if (!isGlassOn) {
    1369. 

  1369.                 document.documentElement.style.setProperty('--glass-alpha', '0.98'); document.documentElement.style.setProperty('--glass-blur', '0px');
    1370. 

  1370.                 document.documentElement.style.setProperty('--glass-saturate', '100%'); document.documentElement.style.setProperty('--glass-border', 'rgba(204, 204, 204, 0.6)'); return;
    1371. 

  1371.             }
    1372. 

  1372.             let el = document.getElementById('glassIntensity'); if(!el) return;
    1373. 

  1373.             let val = parseInt(el.value); let alpha = 0.95 - (val / 100) * 0.75; let blur = (val / 100) * 30; let saturate = 100 + (val / 100) * 100;
    1374. 

  1374.             document.documentElement.style.setProperty('--glass-alpha', alpha.toFixed(2)); document.documentElement.style.setProperty('--glass-blur', blur + 'px');
    1375. 

  1375.             document.documentElement.style.setProperty('--glass-saturate', saturate + '%'); document.documentElement.style.setProperty('--glass-border', 'rgba(255, 255, 255, ' + (0.15 + (val/100)*0.35) + ')');
    1376. 

  1376.         }
    1377. 

  1377. 

  1378.         function autoGlass() {
    1379. 

  1379.             const bgLayer = document.getElementById('bg-layer'); if(!bgLayer) return;
    1380. 

  1380.             const bgImage = bgLayer.style.backgroundImage; const filterEl = document.getElementById('bgFilter'); const filter = filterEl ? filterEl.value : 'none';
    1381. 

  1381.             let idealValue = 30; if (bgImage && bgImage !== 'none') { idealValue = 85; if (filter.includes('blur')) idealValue = 50; }
    1382. 

  1382.             let glassEl = document.getElementById('glassIntensity'); if(glassEl) glassEl.value = idealValue;
    1383. 

  1383.             setGlassState(true); playAudioCue('mainPulse');
    1384. 

  1384.         }
    1385. 

  1385. 

  1386.         const canvasResizeObserver = new ResizeObserver(entries => {
    1387. 

  1387.             requestAnimationFrame(() => {
    1388. 

  1388.                 for (let entry of entries) {
    1389. 

  1389.                     const wrapper = entry.target;
    1390. 

  1390.                     const canvas = wrapper.querySelector('canvas');
    1391. 

  1391.                     if (canvas) {
    1392. 

  1392.                         const w = Math.floor(wrapper.clientWidth);
    1393. 

  1393.                         const h = Math.floor(wrapper.clientHeight);
    1394. 

  1394.                         if (w > 0 && h > 0 && (canvas.width !== w || canvas.height !== h)) {
    1395. 

  1395.                             canvas.width = w;
    1396. 

  1396.                             canvas.height = h;
    1397. 

  1397.                         }
    1398. 

  1398.                     }
    1399. 

  1399.                 }
    1400. 

  1400.             });
    1401. 

  1401.         });
    1402. 

  1402. 

  1403.         window.addEventListener('DOMContentLoaded', () => {
    1404. 

  1404.             document.querySelectorAll('.canvas-wrapper').forEach(wrapper => {
    1405. 

  1405.                 canvasResizeObserver.observe(wrapper);
    1406. 

  1406.             });
    1407. 

  1407.         });
    1408. 

  1408. 

  1409.         function resizeCanvasElement(canvas) {
    1410. 

  1410.             if(!canvas || !canvas.parentElement) return;
    1411. 

  1411.             const w = Math.floor(canvas.parentElement.clientWidth); const h = Math.floor(canvas.parentElement.clientHeight);
    1412. 

  1412.             if (w === 0 || h === 0) return;
    1413. 

  1413.             if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; }
    1414. 

  1414.         }
    1415. 

  1415. 

  1416.         function resizeAllCanvases() { resizeCanvasElement(document.getElementById('canvas-single')); resizeCanvasElement(document.getElementById('canvas-sum')); resizeCanvasElement(document.getElementById('canvas-spectrum')); }
    1417. 

  1417.         window.addEventListener('resize', resizeAllCanvases, { passive: true });
    1418. 

  1418.         
    1419. 

  1419.         function resetCanvasSizes() {
    1420. 

  1420.             document.querySelectorAll('.canvas-wrapper').forEach(w => { w.style.height = '260px'; });
    1421. 

  1421.             let el = document.getElementById('canvasHeightSlider'); if(el) el.value = 260;
    1422. 

  1422.             resizeAllCanvases(); playAudioCue('mainPulse');
    1423. 

  1423.         }
    1424. 

  1424. 

  1425.         function updateColorsCache() { cachedBaseColor = getComputedStyle(document.documentElement).getPropertyValue('--base-wave').trim() || '#2196F3'; }
    1426. 

  1426.         function toggleFullscreen() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen().catch(err=>{}); } else { if (document.exitFullscreen) document.exitFullscreen(); } }
    1427. 

  1427.         document.addEventListener('fullscreenchange', () => { updateDynamicButtons(); });
    1428. 

  1428.         function toggleSidebar() { const sidebar = document.getElementById('sidebar'); const overlay = document.getElementById('sidebar-overlay'); if(!sidebar || !overlay) return; if (sidebar.classList.contains('open')) { sidebar.classList.remove('open'); overlay.style.display = 'none'; } else { sidebar.classList.add('open'); overlay.style.display = 'block'; } }
    1429. 

  1429.         function showInfoModal(id) { let ov = document.getElementById('info-overlay'); if(!ov) return; ov.style.display = 'flex'; setTimeout(()=> ov.classList.add('show'), 10); document.querySelectorAll('.info-content').forEach(el => el.style.display = 'none'); let target = document.getElementById('modal-' + id); if(target) { target.style.display = 'block'; let delays = 0.05; target.querySelectorAll('.pop-animation').forEach(el => { el.style.animationDelay = delays + 's'; delays += 0.05; el.classList.remove('pop-animation'); void el.offsetWidth; el.classList.add('pop-animation'); }); } playAudioCue('action'); }
    1430. 

  1430.         function closeInfoModal() { let ov = document.getElementById('info-overlay'); if(!ov) return; ov.classList.remove('show'); setTimeout(()=> { ov.style.display = 'none'; }, 300); playAudioCue('click'); }
    1431. 

  1431.         function toggleAccordion(btn) { btn.classList.toggle("active"); var content = btn.nextElementSibling; if(!content) return; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } playAudioCue('click'); }
    1432. 

  1432. 

  1433.         function onSelectMedium() { const sel = document.getElementById('mediumSelect'); const inp = document.getElementById('calcSpeedCustom'); if (sel.value !== 'custom') { inp.value = sel.value; } }
    1434. 

  1434.         function onManualSpeedInput() { const sel = document.getElementById('mediumSelect'); const inp = document.getElementById('calcSpeedCustom'); let found = Array.from(sel.options).find(o => o.value == inp.value && o.value !== 'custom'); if (found) { sel.value = found.value; } else { sel.value = 'custom'; } }
    1435. 

  1435. 

  1436.         function calculateWaveLength() {
    1437. 

  1437.             let freqEl1 = document.getElementById('calcFreq1'); if(!freqEl1) return;
    1438. 

  1438.             let freq = parseFloat(freqEl1.value); if (isNaN(freq) || freq <= 0) freq = 1;
    1439. 

  1439.             let speedEl = document.getElementById('calcSpeedCustom'); let speedCustom = speedEl ? parseFloat(speedEl.value) || 343 : 343;
    1440. 

  1440. 

  1441.             safeSetText('calcResAir', `${(speedCustom / freq).toFixed(2)}`);
    1442. 

  1442.             let T = (1 / freq).toFixed(5); safeSetText('calcResPeriod', T);
    1443. 

  1443.             let omega = (2 * Math.PI * freq).toFixed(1); safeSetText('calcResOmega', `${i18n[currentLang].omegaLabel} ~${omega} ${i18n[currentLang].radS}`);
    1444. 

  1444. 

  1445.             const sel = document.getElementById('mediumSelect'); let descLabel = document.getElementById('lblCalcAirDesc');
    1446. 

  1446.             if (descLabel) {
    1447. 

  1447.                 if (sel && sel.value !== 'custom' && sel.options[sel.selectedIndex]) {
    1448. 

  1448.                     let text = sel.options[sel.selectedIndex].innerText; descLabel.innerText = currentLang === 'ru' ? `Среда: ${text}` : `Medium: ${text}`;
    1449. 

  1449.                 } else {
    1450. 

  1450.                     descLabel.innerText = currentLang === 'ru' ? `Скорость ${speedCustom} м/с:` : `Speed ${speedCustom} m/s:`;
    1451. 

  1451.                 }
    1452. 

  1452.             }
    1453. 

  1453.         }
    1454. 

  1454. 

  1455.         function updateStep(val) { freqStep = val; let elF = document.getElementById('freq'); if(elF) elF.step = val; let st10 = document.getElementById('st10'); let st100 = document.getElementById('st100'); if(st10) st10.classList.remove('active'); if(st100) st100.classList.remove('active'); let cur = document.getElementById('st' + val); if(cur) cur.classList.add('active'); }
    1456. 

  1456.         function updateTelemetryUI() { const w = waves[currentWave]; const waveNames = ['V1', 'V2', 'V3']; const L = i18n[currentLang]; safeSetText('lblTelWave', L.telWave); safeSetText('lblTelF', L.telF); safeSetText('lblTelA', L.telA); safeSetText('lblTelClip', L.telClip); safeSetText('lblTelXAxis', L.telXAxis); safeSetText('lblTelPhase', L.lblPhaseShort); let ty = document.getElementById('telY'); if(ty && ty.previousElementSibling) ty.previousElementSibling.innerText = L.telY + ":"; let ts = document.getElementById('telSumY'); if(ts && ts.previousElementSibling) ts.previousElementSibling.innerText = L.telSumY + ":"; let tp = document.getElementById('telSpecPeaks'); if(tp && tp.previousElementSibling) tp.previousElementSibling.innerText = L.telPeaks + ":"; safeSetText('telWaveName', waveNames[currentWave]); safeSetText('telFreq', w.f); safeSetText('telAmp', w.a); safeSetText('telPhase', `${w.p}°`); safeSetText('telClipStatus', isClipped ? L.clipOn : L.clipOff); }
    1457. 

  1457.         function updateLabels() { let w = waves[currentWave]; let fEl = document.getElementById('freq'); if(fEl) fEl.value = w.f; let fInp = document.getElementById('inputV'); if(fInp) fInp.value = w.f; let aEl = document.getElementById('amp'); if(aEl) aEl.value = w.a; let aInp = document.getElementById('inputA'); if(aInp) aInp.value = w.a; let pEl = document.getElementById('phase'); if(pEl) pEl.value = w.p; let pInp = document.getElementById('inputP'); if(pInp) pInp.value = w.p; updateTelemetryUI(); calculateWaveLength(); }
    1458. 

  1458.         
    1459. 

  1459.         function updateWaveFromSlider(type) {
    1460. 

  1460.             if (type === 'freq') { let el = document.getElementById('freq'); if(el) { let val = parseInt(el.value); let inEl = document.getElementById('inputV'); if(inEl) inEl.value = val; waves[currentWave].f = val; playAudioCue('sliderTone', val / 100); } }
    1461. 

  1461.             else if (type === 'amp') { let el = document.getElementById('amp'); if(el) { let val = parseInt(el.value); let inEl = document.getElementById('inputA'); if(inEl) inEl.value = val; waves[currentWave].a = val; playAudioCue('sliderTone', val); } }
    1462. 

  1462.             else if (type === 'phase') { let el = document.getElementById('phase'); if(el) { let val = parseInt(el.value); let inEl = document.getElementById('inputP'); if(inEl) inEl.value = val; waves[currentWave].p = val; playAudioCue('phaseTone', val); } }
    1463. 

  1463.             updateTelemetryUI(); updateWaveAudio();
    1464. 

  1464.         }
    1465. 

  1465. 

  1466.         function updateWaveFromInput(type) {
    1467. 

  1467.             if (type === 'freq') { let el = document.getElementById('inputV'); if(el) { let val = parseInt(el.value); if(!isNaN(val) && val >= 0 && val <= 20000) { let sEl=document.getElementById('freq'); if(sEl) sEl.value = val; waves[currentWave].f = val; } } }
    1468. 

  1468.             else if (type === 'amp') { let el = document.getElementById('inputA'); if(el) { let val = parseInt(el.value); if(!isNaN(val) && val >= 0 && val <= 100) { let sEl=document.getElementById('amp'); if(sEl) sEl.value = val; waves[currentWave].a = val; } } }
    1469. 

  1469.             else if (type === 'phase') { let el = document.getElementById('inputP'); if(el) { let val = parseInt(el.value); if(!isNaN(val) && val >= 0 && val <= 360) { let sEl=document.getElementById('phase'); if(sEl) sEl.value = val; waves[currentWave].p = val; } } }
    1470. 

  1470.             playAudioCue('calcKey'); updateTelemetryUI(); updateWaveAudio();
    1471. 

  1471.         }
    1472. 

  1472. 

  1473.         function switchTab(index) { currentWave = index; document.querySelectorAll('.tabs .tab').forEach((el, i) => { if (i===index) el.classList.add('active'); else el.classList.remove('active'); }); updateLabels(); playAudioCue('click'); }
    1474. 

  1474.         function togglePause() { isPaused = !isPaused; updateDynamicButtons(); playAudioCue('click'); }
    1475. 

  1475.         
    1476. 

  1476.         function setPreset(type) {
    1477. 

  1477.             currentPreset = type; document.querySelectorAll('.presets-row button').forEach(b => b.classList.remove('active')); let activeBtn = document.getElementById('pr_' + type); if(activeBtn) activeBtn.classList.add('active');
    1478. 

  1478.             if (type === 'sine') { waves[0] = { f: 440, a: 80, p: 0, type: 'sine' }; waves[1] = { f: 880, a: 0, p: 0, type: 'sine' }; waves[2] = { f: 1320, a: 0, p: 0, type: 'sine' }; isClipped = false; }
    1479. 

  1479.             else if (type === 'square') { waves[0] = { f: 400, a: 100, p: 0, type: 'square' }; waves[1] = { f: 1200, a: 33, p: 0, type: 'square' }; waves[2] = { f: 2000, a: 20, p: 0, type: 'square' }; }
    1480. 

  1480.             else if (type === 'triangle') { waves[0] = { f: 400, a: 100, p: 0, type: 'triangle' }; waves[1] = { f: 1200, a: 11, p: 180, type: 'triangle' }; waves[2] = { f: 2000, a: 4, p: 0, type: 'triangle' }; }
    1481. 

  1481.             else if (type === 'sawtooth') { waves[0] = { f: 400, a: 100, p: 0, type: 'sawtooth' }; waves[1] = { f: 800, a: 50, p: 180, type: 'sawtooth' }; waves[2] = { f: 1200, a: 33, p: 0, type: 'sawtooth' }; }
    1482. 

  1482.             updateLabels(); updateDynamicButtons(); updateWaveAudio(); playAudioCue('mainPulse');
    1483. 

  1483.         }
    1484. 

  1484. 

  1485.         document.querySelectorAll('.presets-row button').forEach(btn => {
    1486. 

  1486.             btn.addEventListener('click', () => { let id = btn.id.replace('pr_', ''); waves[currentWave].type = id; });
    1487. 

  1487.         });
    1488. 

  1488. 

  1489.         function toggleClip() { isClipped = !isClipped; updateLabels(); updateDynamicButtons(); updateWaveAudio(); playAudioCue('mainPulse'); }
    1490. 

  1490.         
    1491. 

  1491.         function resetAll() {
    1492. 

  1492.             waves = [{ f: 440, a: 80, p: 0, type: 'sine' }, { f: 880, a: 0, p: 0, type: 'sine' }, { f: 1320, a: 0, p: 0, type: 'sine' }]; isClipped = false; isLissajous = false; clearBackground();
    1493. 

  1493.             let lisBtn = document.getElementById('btnLissajous'); if(lisBtn) { lisBtn.classList.remove('active'); }
    1494. 

  1494.             safeSetText('lblLisMode', ""); animSpeedMultiplier = 1.0;
    1495. 

  1495.             let elSpeed = document.getElementById('speed'); if(elSpeed) elSpeed.value = 1.0; updateSpeedValue(1.0);
    1496. 

  1496.             setPreset('sine'); if (isPaused) togglePause(); resetCanvasSizes(); switchTab(0); updateWaveAudio(); updateDynamicButtons(); playAudioCue('error');
    1497. 

  1497.         }
    1498. 

  1498. 

  1499.         function updateWaveAudio() {
    1500. 

  1500.             if (!waveCtx || oscillators.length === 0 || !masterWaveShaper) return; 
    1501. 

  1501.             const now = waveCtx.currentTime;
    1502. 

  1502. 

  1503.             if (isClipped) { masterWaveShaper.curve = makeDistortionCurve(400); } 
    1504. 

  1504.             else { masterWaveShaper.curve = null; }
    1505. 

  1505. 

  1506.             for (let i = 0; i < 3; i++) {
    1507. 

  1507.                 oscillators[i].osc.frequency.setTargetAtTime(waves[i].f, now, 0.03); 
    1508. 

  1508.                 oscillators[i].osc.type = waves[i].type || 'sine';
    1509. 

  1509.                 let targetVol = 0; if (isAudioOn && waves[i].a > 0) { targetVol = (waves[i].a / 100) * 0.12; }
    1510. 

  1510.                 oscillators[i].gain.gain.setTargetAtTime(targetVol, now, 0.05);
    1511. 

  1511.             }
    1512. 

  1512.         }
    1513. 

  1513. 

  1514.         function toggleAudio() { try { if (waveCtx && waveCtx.state === 'suspended') waveCtx.resume(); } catch(e){} isAudioOn = !isAudioOn; updateDynamicButtons(); updateWaveAudio(); playAudioCue('action'); }
    1515. 

  1515.         function updateColorsCache() { cachedBaseColor = getComputedStyle(document.documentElement).getPropertyValue('--base-wave').trim() || '#2196F3'; }
    1516. 

  1516.         function changeTheme(t) { document.documentElement.setAttribute('data-theme', t); buildSelectOptions(); updateColorsCache(); playAudioCue('action'); }
    1517. 

  1517.         function changeFilter(f) { let bl = document.getElementById('bg-layer'); if(bl) bl.style.filter = f; buildSelectOptions(); playAudioCue('click'); }
    1518. 

  1518.         function clearBackground() { let bl = document.getElementById('bg-layer'); if(bl) bl.style.backgroundImage = 'none'; let bu = document.getElementById('bgUpload'); if(bu) bu.value = ''; playAudioCue('mainPulse'); }
    1519. 

  1519.         function uploadBackground(e) { if (e.target.files[0]) { const r = new FileReader(); r.onload = ev => { let bl = document.getElementById('bg-layer'); if(bl) bl.style.backgroundImage = `url('${ev.target.result}')`; playAudioCue('glassBell'); }; r.readAsDataURL(e.target.files[0]); } }
    1520. 

  1520.         
    1521. 

  1521.         function downloadGraph(id) { 
    1522. 

  1522.             const c = document.getElementById(id); if(!c) return; 
    1523. 

  1523.             
    1524. 

  1524.             let btn = document.querySelector('.btn-camera-snap');
    1525. 

  1525.             if (btn) {
    1526. 

  1526.                 let flash = document.createElement('div');
    1527. 

  1527.                 flash.className = 'camera-flash-overlay';
    1528. 

  1528.                 flash.style.animation = 'flashAnim 0.4s ease-out';
    1529. 

  1529.                 c.parentElement.appendChild(flash);
    1530. 

  1530.                 setTimeout(() => flash.remove(), 400);
    1531. 

  1531.             }
    1532. 

  1532. 

  1533.             const l = document.createElement('a'); l.download = 'HarmoniX_Graph.png'; 
    1534. 

  1534.             const tc = document.createElement('canvas'); tc.width = c.width; tc.height = c.height; 
    1535. 

  1535.             const tCtx = tc.getContext('2d'); tCtx.fillStyle = '#ffffff'; tCtx.fillRect(0,0,tc.width,tc.height); 
    1536. 

  1536.             tCtx.drawImage(c,0,0); l.href = tc.toDataURL(); l.click(); 
    1537. 

  1537.         }
    1538. 

  1538. 

  1539.         function getWaveValue(type, phase) {
    1540. 

  1540.             switch (type) {
    1541. 

  1541.                 case 'square': return Math.sign(Math.sin(phase));
    1542. 

  1542.                 case 'sawtooth': return 2 * (phase / (2 * Math.PI) - Math.floor(phase / (2 * Math.PI) + 0.5));
    1543. 

  1543.                 case 'triangle': return 1 - 4 * Math.abs(Math.round(phase / (2 * Math.PI)) - phase / (2 * Math.PI));
    1544. 

  1544.                 case 'sine':
    1545. 

  1545.                 default: return Math.sin(phase);
    1546. 

  1546.             }
    1547. 

  1547.         }
    1548. 

  1548. 

  1549.         let lastTelemUpdate = 0;
    1550. 

  1550.         function draw() {
    1551. 

  1551.             if (!isPaused) time += (BASE_ANIM_SPEED * animSpeedMultiplier);
    1552. 

  1552.             let c1 = document.getElementById('canvas-single'); let c2 = document.getElementById('canvas-sum'); let c3 = document.getElementById('canvas-spectrum');
    1553. 

  1553.             
    1554. 

  1554.             let ctx1 = c1 ? c1.getContext('2d') : null; if(ctx1) ctx1.clearRect(0, 0, c1.width, c1.height);
    1555. 

  1555.             let ctx2 = c2 ? c2.getContext('2d') : null; if(ctx2) ctx2.clearRect(0, 0, c2.width, c2.height);
    1556. 

  1556.             let ctx3 = c3 ? c3.getContext('2d') : null; if(ctx3) ctx3.clearRect(0, 0, c3.width, c3.height);
    1557. 

  1557. 

  1558.             let baseColor = cachedBaseColor; let sumColor = "#E91E63"; let gridColor = "rgba(128,128,128,0.22)";
    1559. 

  1559.             const wParams = waves.map(w => ({ vf: (w.f / 200) || 1, pr: w.p * (Math.PI / 180), amp: (w.a / 100), type: w.type || 'sine' }));
    1560. 

  1560.             const c1mid = c1 ? c1.height / 2 : 0; const c1amp = c1 ? c1.height / 2.5 : 0;
    1561. 

  1561.             const c2mid = c2 ? c2.height / 2 : 0; const c2amp = c2 ? c2.height / 2.5 : 0;
    1562. 

  1562. 

  1563.             if (isGridOn) {
    1564. 

  1564.                 if(ctx1) { ctx1.beginPath(); ctx1.strokeStyle = gridColor; ctx1.moveTo(0, c1mid); ctx1.lineTo(c1.width, c1mid); ctx1.stroke(); }
    1565. 

  1565.                 if(ctx2) { ctx2.beginPath(); ctx2.strokeStyle = gridColor; ctx2.moveTo(0, c2mid); ctx2.lineTo(c2.width, c2mid); ctx2.stroke(); }
    1566. 

  1566.                 if(ctx3) { ctx3.beginPath(); ctx3.strokeStyle = gridColor; ctx3.moveTo(0, c3.height - 18); ctx3.lineTo(c3.width, c3.height - 18); ctx3.stroke(); }
    1567. 

  1567.             }
    1568. 

  1568. 

  1569.             if (isGlowOn) {
    1570. 

  1570.                 if(ctx1) { ctx1.shadowBlur = 10; ctx1.shadowColor = baseColor; }
    1571. 

  1571.                 if(ctx2) { ctx2.shadowBlur = 10; ctx2.shadowColor = sumColor; }
    1572. 

  1572.                 if(ctx3) { ctx3.shadowBlur = 10; ctx3.shadowColor = "#4CAF50"; }
    1573. 

  1573.             } else {
    1574. 

  1574.                 if(ctx1) ctx1.shadowBlur = 0; if(ctx2) ctx2.shadowBlur = 0; if(ctx3) ctx3.shadowBlur = 0;
    1575. 

  1575.             }
    1576. 

  1576. 

  1577.             let singleInstantY = 0;
    1578. 

  1578.             if(ctx1 && c1.width > 0) {
    1579. 

  1579.                 ctx1.beginPath(); ctx1.strokeStyle = baseColor; ctx1.lineWidth = 2.5;
    1580. 

  1580.                 if (isLissajous) {
    1581. 

  1581.                     ctx1.moveTo(c1.width/2 + Math.cos(-time + wParams[0].pr) * wParams[0].amp * (c1.width/3), c1mid - Math.sin(-time + wParams[1].pr) * wParams[1].amp * c1amp);
    1582. 

  1582.                     for (let t = 0; t < Math.PI * 4; t += 0.05) { let lx = c1.width/2 + Math.cos(t * wParams[0].vf - time + wParams[0].pr) * wParams[0].amp * (c1.width/3); let ly = c1mid - Math.sin(t * wParams[1].vf - time + wParams[1].pr) * wParams[1].amp * c1amp; ctx1.lineTo(lx, ly); }
    1583. 

  1583.                 } else {
    1584. 

  1584.                     for (let x = 0; x < c1.width; x += 2) {
    1585. 

  1585.                         let phaseCalc = x * 0.02 * wParams[currentWave].vf - time + wParams[currentWave].pr;
    1586. 

  1586.                         let y = getWaveValue(wParams[currentWave].type, phaseCalc) * wParams[currentWave].amp * c1amp;
    1587. 

  1587.                         if (x === 0) { ctx1.moveTo(x, c1mid - y); singleInstantY = y / c1amp; } else ctx1.lineTo(x, c1mid - y);
    1588. 

  1588.                     }
    1589. 

  1589.                 }
    1590. 

  1590.                 ctx1.stroke();
    1591. 

  1591.             }
    1592. 

  1592. 

  1593.             let sumInstantY = 0;
    1594. 

  1594.             if(ctx2 && c2.width > 0) {
    1595. 

  1595.                 let clipLimit = c2.height / 4; ctx2.beginPath(); 
    1596. 

  1596.                 ctx2.strokeStyle = isMaskingTZI ? '#00E676' : sumColor; ctx2.lineWidth = isMaskingTZI ? 1.5 : 2.5;
    1597. 

  1597.                 for (let x = 0; x < c2.width; x += 2) {
    1598. 

  1598.                     let sumY = 0; 
    1599. 

  1599.                     for (let i = 0; i < 3; i++) { 
    1600. 

  1600.                         let phaseCalc = x * 0.02 * wParams[i].vf - time + wParams[i].pr;
    1601. 

  1601.                         sumY += getWaveValue(wParams[i].type, phaseCalc) * wParams[i].amp * c2amp;
    1602. 

  1602.                     }
    1603. 

  1603.                     if (isClipped) { if (sumY > clipLimit) sumY = clipLimit; if (sumY < -clipLimit) sumY = -clipLimit; }
    1604. 

  1604.                     if (isMaskingTZI) { sumY += (Math.random() * 40 - 20); }
    1605. 

  1605.                     if (x === 0) { ctx2.moveTo(x, c2mid - sumY/1.5); sumInstantY = sumY / c2amp; } else ctx2.lineTo(x, c2mid - sumY/1.5);
    1606. 

  1606.                 }
    1607. 

  1607.                 ctx2.stroke();
    1608. 

  1608.             }
    1609. 

  1609. 

  1610.             let nowTime = performance.now();
    1611. 

  1611.             if (showLabels && (nowTime - lastTelemUpdate > 90)) {
    1612. 

  1612.                 lastTelemUpdate = nowTime;
    1613. 

  1613.                 let tY = document.getElementById('telY'); if(tY) tY.innerText = isLissajous ? "2D" : (singleInstantY >= 0 ? "+" : "") + singleInstantY.toFixed(2);
    1614. 

  1614.                 let tSY = document.getElementById('telSumY'); if(tSY) tSY.innerText = (sumInstantY >= 0 ? "+" : "") + sumInstantY.toFixed(2);
    1615. 

  1615.                 let activePeaks = waves.filter(item => item.a > 0).length; if (isClipped && waves[0].a > 0) activePeaks += 4;
    1616. 

  1616.                 let tSP = document.getElementById('telSpecPeaks'); if(tSP) tSP.innerText = activePeaks;
    1617. 

  1617. 

  1618.                 let thdEl = document.getElementById('telemTHD');
    1619. 

  1619.                 let limitEl = document.getElementById('telemLimit');
    1620. 

  1620.                 if (isClipped) {
    1621. 

  1621.                     if(thdEl) { thdEl.style.display = 'inline-flex'; document.getElementById('telTHDVal').innerText = "≈ 43%"; }
    1622. 

  1622.                     if(limitEl) { limitEl.style.display = 'inline-flex'; document.getElementById('telLimitVal').innerText = "± 25%"; }
    1623. 

  1623.                 } else {
    1624. 

  1624.                     if(thdEl) thdEl.style.display = 'none';
    1625. 

  1625.                     if(limitEl) limitEl.style.display = 'none';
    1626. 

  1626.                 }
    1627. 

  1627.             }
    1628. 

  1628. 

  1629.             if(ctx3 && c3.width > 0) {
    1630. 

  1630.                 ctx3.shadowBlur = 0;
    1631. 

  1631.                 if (showLabels) { ctx3.fillStyle = "rgba(128,128,128,0.85)"; ctx3.font = "10px Arial"; ctx3.fillText("5k", (5000 / 20000) * c3.width, c3.height - 3); ctx3.fillText("10k", (10000 / 20000) * c3.width, c3.height - 3); ctx3.fillText("15k", (15000 / 20000) * c3.width, c3.height - 3); }
    1632. 

  1632. 

  1633.                 ctx3.fillStyle = "#4CAF50";
    1634. 

  1634.                 if (isGlowOn) { ctx3.shadowBlur = 10; ctx3.shadowColor = "#4CAF50"; }
    1635. 

  1635.                 for (let i = 0; i < 3; i++) { if (wParams[i].amp > 0) { let xPos = (waves[i].f / 20000) * c3.width; let h = wParams[i].amp * (c3.height - 32); ctx3.fillRect(Math.max(xPos, 5), c3.height - 18 - h, 10, h); } }
    1636. 

  1636. 

  1637.                 if (isClipped) {
    1638. 

  1638.                     ctx3.fillStyle = "rgba(255, 87, 34, 0.9)";
    1639. 

  1639.                     if (isGlowOn) { ctx3.shadowBlur = 10; ctx3.shadowColor = "rgba(255, 87, 34, 1)"; }
    1640. 

  1640.                     for (let w = 0; w < 3; w++) {
    1641. 

  1641.                         if (wParams[w].amp > 0) {
    1642. 

  1642.                             for (let i = 3; i <= 15; i += 2) { 
    1643. 

  1643.                                 let fakeF = waves[w].f * i; 
    1644. 

  1644.                                 if (fakeF > 20000) break; 
    1645. 

  1645.                                 let xPos = (fakeF / 20000) * c3.width; 
    1646. 

  1646.                                 let h = (waves[w].a / (i*1.5) / 100) * (c3.height - 32); 
    1647. 

  1647.                                 ctx3.fillRect(Math.max(xPos, 5), c3.height - 18 - h, 6, h); 
    1648. 

  1648.                             }
    1649. 

  1649.                         }
    1650. 

  1650.                     }
    1651. 

  1651.                 }
    1652. 

  1652. 

  1653.                 if (isMaskingTZI) {
    1654. 

  1654.                     ctx3.fillStyle = "rgba(0, 230, 118, 0.4)";
    1655. 

  1655.                     for(let i=0; i< c3.width; i+=8) { let noiseH = Math.random() * (c3.height / 3); ctx3.fillRect(i, c3.height - 18 - noiseH, 4, noiseH); }
    1656. 

  1656.                 }
    1657. 

  1657.                 ctx3.shadowBlur = 0;
    1658. 

  1658.             }
    1659. 

  1659.             animationFrameId = requestAnimationFrame(draw);
    1660. 

  1660.         }
    1661. 

  1661. 

  1662.         function generateDynamicQuestion(index) {
    1663. 

  1663.             const freqs = [10, 20, 50, 100, 200, 440, 500, 1000]; const f = freqs[index % freqs.length]; const v = [340, 1480, 5900][index % 3]; const isRu = currentLang === 'ru';
    1664. 

  1664.             const templates = [
    1665. 

  1665.                 () => { let T = (1/f).toFixed(4).replace(/\.?0+$/, ""); return { q: isRu ? `Чему равен период (T) при частоте ${f} Гц?` : `What is the period (T) at frequency ${f} Hz?`, opts: [{t: `${T} ${isRu?'с':'s'}`, c:true}, {t: `${(2/f).toFixed(4)} ${isRu?'с':'s'}`, c:false}, {t: `${(1/(f*2)).toFixed(4)} ${isRu?'с':'s'}`, c:false}], reason: isRu ? `T = 1 / V = 1 / ${f} = ${T} с.` : `T = 1 / V = 1 / ${f} = ${T} s.`, link: isRu ? 'https://ru.wikipedia.org/wiki/Период_колебаний' : 'https://en.wikipedia.org/wiki/Frequency' } },
    1666. 

  1666.                 () => { let l = (v/f).toFixed(2); return { q: isRu ? `Скорость звука ${v} м/с. Какова длина волны при ${f} Гц?` : `Sound speed is ${v} m/s. What is the wavelength at ${f} Hz?`, opts: [{t: `${l} ${isRu?'м':'m'}`, c:true}, {t: `${(v*f).toFixed(0)} ${isRu?'м':'m'}`, c:false}, {t: `${(v/(f*2)).toFixed(2)} ${isRu?'м':'m'}`, c:false}], reason: isRu ? `λ = v / V = ${v} / ${f} = ${l} м.` : `λ = v / V = ${v} / ${f} = ${l} m.`, link: isRu ? 'https://ru.wikipedia.org/wiki/Длина_волны' : 'https://en.wikipedia.org/wiki/Wavelength' } },
    1667. 

  1667.                 () => { let w = (2 * Math.PI * f).toFixed(1); return { q: isRu ? `Циклическая частота (w) при ${f} Гц?` : `Angular frequency (w) at ${f} Hz?`, opts: [{t: `≈ ${w} ${isRu?'рад/с':'rad/s'}`, c:true}, {t: `≈ ${(Math.PI * f).toFixed(1)} ${isRu?'рад/с':'rad/s'}`, c:false}, {t: `≈ ${(f / (2*Math.PI)).toFixed(1)} ${isRu?'рад/с':'rad/s'}`, c:false}], reason: isRu ? `w = 2πV = 2 * 3.14 * ${f} ≈ ${w}` : `w = 2πV = 2 * 3.14 * ${f} ≈ ${w}`, link: isRu ? 'https://ru.wikipedia.org/wiki/Круговая_частота' : 'https://en.wikipedia.org/wiki/Angular_frequency' } },
    1668. 

  1668.                 () => { return isRu ? { q: "Что утверждает теорема Фурье?", opts: [{t:"Любой периодический сигнал — это сумма синусоид", c:true}, {t:"Частота обратно пропорциональна амплитуде", c:false}, {t:"Энергия всегда константа", c:false}], reason: "Фурье доказал, что любую периодическую волну можно собрать из простых синусов.", link: 'https://ru.wikipedia.org/wiki/Ряд_Фурье' } : { q: "What does Fourier's theorem state?", opts: [{t:"Any periodic signal is a sum of sine waves", c:true}, {t:"Frequency is inversely proportional to amplitude", c:false}, {t:"Energy is always constant", c:false}], reason: "Fourier proved any periodic wave can be built from simple sines.", link: 'https://en.wikipedia.org/wiki/Fourier_series' } },
    1669. 

  1669.                 () => { return isRu ? { q: "Какая разность фаз вызывает полное гашение волн?", opts: [{t:"180°", c:true}, {t:"0°", c:false}, {t:"90°", c:false}], reason: "Сдвиг 180° (противофаза) означает, что гребень совпадает со впадиной.", link: 'https://ru.wikipedia.org/wiki/Интерференция_волн' } : { q: "What phase difference causes complete destructive interference?", opts: [{t:"180°", c:true}, {t:"0°", c:false}, {t:"90°", c:false}], reason: "A 180° shift means a crest perfectly overlaps a trough, canceling the wave.", link: 'https://en.wikipedia.org/wiki/Wave_interference' } },
    1670. 

  1670.                 () => { return isRu ? { q: "К чему приводит клиппинг (ограничение амплитуды)?", opts: [{t:"К появлению нелинейных гармоник", c:true}, {t:"К сдвигу частоты вниз", c:false}, {t:"К плавному затуханию", c:false}], reason: "Обрезанная синусоида становится похожа на меандр, который содержит множество обертонов.", link: 'https://ru.wikipedia.org/wiki/Клиппинг_(аудио)' } : { q: "What is the result of amplitude clipping?", opts: [{t:"Generation of non-linear harmonics", c:true}, {t:"Frequency downshift", c:false}, {t:"Smooth fading", c:false}], reason: "A clipped sine wave resembles a square wave, which contains many overtones.", link: 'https://en.wikipedia.org/wiki/Clipping_(audio)' } },
    1671. 

  1671.                 () => { return isRu ? { q: "Как получить фигуры Лиссажу?", opts: [{t:"Подать сигналы на оси X и Y", c:true}, {t:"Увеличить амплитуду", c:false}, {t:"Применить спектральный фильтр", c:false}], reason: "Фигуры Лиссажу строятся при сложении двух взаимно перпендикулярных колебаний.", link: 'https://ru.wikipedia.org/wiki/Фигуры_Лиссажу' } : { q: "How to generate Lissajous figures?", opts: [{t:"Apply signals to X and Y axes", c:true}, {t:"Increase amplitude to max", c:false}, {t:"Apply a spectral filter", c:false}], reason: "Lissajous figures are drawn by combining two mutually perpendicular oscillations.", link: 'https://en.wikipedia.org/wiki/Lissajous_curve' } },
    1672. 

  1672.                 () => { return isRu ? { q: "Что определяет высоту тона в звуковой волне?", opts: [{t:"Частота (V)", c:true}, {t:"Амплитуда (A)", c:false}, {t:"Фаза (θ)", c:false}], reason: "Чем выше частота колебаний, тем выше воспринимаемый тон звука.", link: 'https://ru.wikipedia.org/wiki/Высота_звука' } : { q: "What determines the pitch of a sound wave?", opts: [{t:"Frequency (V)", c:true}, {t:"Amplitude (A)", c:false}, {t:"Phase (θ)", c:false}], reason: "Higher frequency corresponds to a higher perceived pitch.", link: 'https://en.wikipedia.org/wiki/Pitch_(music)' } }
    1673. 

  1673.             ];
    1674. 

  1674.             return templates[index % templates.length]();
    1675. 

  1675.         }
    1676. 

  1676. 

  1677.         function shuffle(a) { return a.sort(() => Math.random() - 0.5); }
    1678. 

  1678. 

  1679.         let quizAnswers = {}; let quizQuestionsList = []; let currentQuestionIdx = 0;
    1680. 

  1680.         let quizTimerInterval = null; let quizTimeLeft = 0; let quizTotalTime = 0;
    1681. 

  1681. 

  1682.         function startQuizTimer(seconds) {
    1683. 

  1683.             clearInterval(quizTimerInterval);
    1684. 

  1684.             const bar = document.getElementById('quizTimerBar'); const val = document.getElementById('quizTimerVal'); const prog = document.getElementById('quizTimerProgress');
    1685. 

  1685.             if(!bar || !val) return;
    1686. 

  1686.             val.className = 'timer-display';
    1687. 

  1687.             if(prog) { prog.style.width = '100%'; prog.style.background = 'linear-gradient(90deg, #00E676 0%, #00B0FF 100%)'; prog.style.boxShadow = '0 0 12px rgba(0, 230, 118, 0.6)'; }
    1688. 

  1688.             if (seconds <= 0) { bar.style.display = 'none'; return; }
    1689. 

  1689.             bar.style.display = 'flex'; quizTimeLeft = seconds; quizTotalTime = seconds;
    1690. 

  1690. 

  1691.             function updateTimerDisplay() {
    1692. 

  1692.                 let m = Math.floor(quizTimeLeft / 60); let s = quizTimeLeft % 60;
    1693. 

  1693.                 val.innerText = `${m < 10 ? '0' : ''}${m}:${s < 10 ? '0' : ''}${s}`;
    1694. 

  1694.                 if(prog) {
    1695. 

  1695.                     let pct = (quizTimeLeft / quizTotalTime) * 100; prog.style.width = `${pct}%`;
    1696. 

  1696.                     if(pct > 50) { prog.style.background = 'linear-gradient(90deg, #00E676 0%, #00B0FF 100%)'; prog.style.boxShadow = '0 0 12px rgba(0, 230, 118, 0.6)'; } 
    1697. 

  1697.                     else if(pct <= 50 && pct > 20) { prog.style.background = 'linear-gradient(90deg, #FFEA00 0%, #FF9800 100%)'; prog.style.boxShadow = '0 0 12px rgba(255, 152, 0, 0.6)'; } 
    1698. 

  1698.                     else { prog.style.background = 'linear-gradient(90deg, #FF5722 0%, #F44336 100%)'; prog.style.boxShadow = '0 0 12px rgba(244, 67, 54, 0.8)'; }
    1699. 

  1699.                 }
    1700. 

  1700.                 if (quizTimeLeft <= 10) { val.className = 'timer-display timer-red-blink'; playAudioCue('tick'); } 
    1701. 

  1701.                 else if (quizTimeLeft <= 30) { val.className = 'timer-display timer-orange'; } 
    1702. 

  1702.                 else if (quizTimeLeft === 60) { playAudioCue('warn'); val.className = 'timer-display timer-orange'; } 
    1703. 

  1703.                 else { val.className = 'timer-display'; }
    1704. 

  1704.             }
    1705. 

  1705. 

  1706.             updateTimerDisplay();
    1707. 

  1707.             quizTimerInterval = setInterval(() => {
    1708. 

  1708.                 quizTimeLeft--;
    1709. 

  1709.                 if (quizTimeLeft <= 0) { clearInterval(quizTimerInterval); checkTest(); alert(i18n[currentLang].testTimeUp); } 
    1710. 

  1710.                 else { updateTimerDisplay(); }
    1711. 

  1711.             }, 1000);
    1712. 

  1712.         }
    1713. 

  1713. 

  1714.         function openTestMenu(){
    1715. 

  1715.             clearInterval(quizTimerInterval); let ov = document.getElementById('test-overlay'); if(!ov) return;
    1716. 

  1716.             ov.style.display = 'flex'; setTimeout(()=> ov.classList.add('show'), 10);
    1717. 

  1717.             
    1718. 

  1718.             const startMenu = document.getElementById('test-start-menu'); if (startMenu) startMenu.style.display = 'block';
    1719. 

  1719.             const modesBox = document.getElementById('testModesContainer'); if (modesBox) modesBox.style.display = 'grid';
    1720. 

  1720. 

  1721.             document.getElementById('quiz-process').style.display = 'none';
    1722. 

  1722.             document.getElementById('test-result-screen').style.display = 'none';
    1723. 

  1723.             document.getElementById('quiz-card-wrapper').style.display = 'block';
    1724. 

  1724.             document.getElementById('quiz-nav-controls').style.display = 'flex';
    1725. 

  1725.             
    1726. 

  1726.             let mc = document.querySelector('#test-overlay .modal-content'); if(mc) mc.classList.add('pop-animation');
    1727. 

  1727.             playAudioCue('menuClick');
    1728. 

  1728.         }
    1729. 

  1729. 

  1730.         function startQuiz(n){
    1731. 

  1731.             document.getElementById('test-start-menu').style.display = 'none';
    1732. 

  1732.             document.getElementById('quiz-process').style.display = 'block';
    1733. 

  1733.             document.getElementById('test-result-screen').style.display = 'none';
    1734. 

  1734.             document.getElementById('quiz-card-wrapper').style.display = 'block';
    1735. 

  1735.             document.getElementById('quiz-nav-controls').style.display = 'flex';
    1736. 

  1736. 

  1737.             quizAnswers = {}; quizQuestionsList = []; currentQuestionIdx = 0;
    1738. 

  1738. 

  1739.             for (let i = 0; i < n; i++) {
    1740. 

  1740.                 let randomIdx = Math.floor(Math.random() * 1000);
    1741. 

  1741.                 const item = generateDynamicQuestion(randomIdx); 
    1742. 

  1742.                 item.opts = shuffle([...item.opts]); 
    1743. 

  1743.                 quizQuestionsList.push(item);
    1744. 

  1744.             }
    1745. 

  1745.             renderCurrentQuestion();
    1746. 

  1746. 

  1747.             if (n === 5) startQuizTimer(0); else if (n === 15) startQuizTimer(300); else if (n === 30) startQuizTimer(600); else if (n === 50) startQuizTimer(900);
    1748. 

  1748.             playAudioCue('glassBell');
    1749. 

  1749.         }
    1750. 

  1750. 

  1751.         function renderCurrentQuestion() {
    1752. 

  1752.             const container = document.getElementById('quiz-container'); if(!container) return; container.innerHTML = '';
    1753. 

  1753.             const item = quizQuestionsList[currentQuestionIdx]; const total = quizQuestionsList.length;
    1754. 

  1754. 

  1755.             let card = document.createElement('div'); card.className = 'question glass-element pop-animation';
    1756. 

  1756.             let meta = document.createElement('div'); meta.className = 'question-meta';
    1757. 

  1757.             meta.innerHTML = `<span>${i18n[currentLang].qWord} ${currentQuestionIdx + 1} ${i18n[currentLang].qOf} ${total}</span>`;
    1758. 

  1758.             card.appendChild(meta);
    1759. 

  1759. 

  1760.             let qText = document.createElement('p'); qText.innerText = item.q; card.appendChild(qText);
    1761. 

  1761. 

  1762.             item.opts.forEach((opt, optIdx) => {
    1763. 

  1763.                 let lbl = document.createElement('label'); lbl.className = 'quiz-option glass-element smooth-transition';
    1764. 

  1764.                 if (quizAnswers[currentQuestionIdx] !== undefined && quizAnswers[currentQuestionIdx] === optIdx) { lbl.classList.add('selected'); }
    1765. 

  1765.                 lbl.onclick = function() {
    1766. 

  1766.                     quizAnswers[currentQuestionIdx] = optIdx;
    1767. 

  1767.                     card.querySelectorAll('.quiz-option').forEach(el => el.classList.remove('selected'));
    1768. 

  1768.                     lbl.classList.add('selected'); playAudioCue('calcKey');
    1769. 

  1769.                 };
    1770. 

  1770.                 lbl.innerHTML = `<input type="radio" name="q_opt" ${quizAnswers[currentQuestionIdx] === optIdx ? 'checked' : ''}><div class="custom-radio"></div><span class="option-text">${opt.t}</span>`;
    1771. 

  1771.                 card.appendChild(lbl);
    1772. 

  1772.             });
    1773. 

  1773.             container.appendChild(card); updateQuizStepIndicator();
    1774. 

  1774.         }
    1775. 

  1775. 

  1776.         function updateQuizStepIndicator() {
    1777. 

  1777.             const total = quizQuestionsList.length;
    1778. 

  1778.             const ind = document.getElementById('quiz-step-indicator'); if(ind) ind.innerText = `${currentQuestionIdx + 1} / ${total}`;
    1779. 

  1779.             const btnPrev = document.getElementById('btnPrevQ'); if(btnPrev) btnPrev.disabled = (currentQuestionIdx === 0);
    1780. 

  1780.             const btnNext = document.getElementById('btnNextQ');
    1781. 

  1781.             if(btnNext) {
    1782. 

  1782.                 if (currentQuestionIdx === total - 1) {
    1783. 

  1783.                     btnNext.innerHTML = `<span>${i18n[currentLang].btnCheck}</span> ✅`;
    1784. 

  1784.                     btnNext.onclick = function() { checkTest(); playAudioCue('glassBell'); };
    1785. 

  1785.                 } else {
    1786. 

  1786.                     btnNext.innerHTML = `<span>${i18n[currentLang].btnNext}</span> ▶`;
    1787. 

  1787.                     btnNext.onclick = function() { nextQuestion(); playAudioCue('mainPulse'); };
    1788. 

  1788.                 }
    1789. 

  1789.             }
    1790. 

  1790.         }
    1791. 

  1791. 

  1792.         function nextQuestion() { if (currentQuestionIdx < quizQuestionsList.length - 1) { currentQuestionIdx++; renderCurrentQuestion(); } }
    1793. 

  1793.         function prevQuestion() { if (currentQuestionIdx > 0) { currentQuestionIdx--; renderCurrentQuestion(); } }
    1794. 

  1794. 

  1795.         function closeTest(){
    1796. 

  1796.             clearInterval(quizTimerInterval); let ov = document.getElementById('test-overlay'); if(!ov) return;
    1797. 

  1797.             ov.classList.remove('show');
    1798. 

  1798.             setTimeout(()=> { ov.style.display = 'none'; let mc = document.querySelector('#test-overlay .modal-content'); if(mc) mc.classList.remove('pop-animation'); }, 300);
    1799. 

  1799.             playAudioCue('click');
    1800. 

  1800.         }
    1801. 

  1801. 

  1802.         function animateScoreCounter(targetPercent, onFinish) {
    1803. 

  1803.             const text = document.getElementById('scoreCircleText');
    1804. 

  1804.             const circle = document.getElementById('scoreProgress');
    1805. 

  1805.             
    1806. 

  1806.             let color = '#f44336';
    1807. 

  1807.             if (targetPercent >= 90) color = '#00E676';
    1808. 

  1808.             else if (targetPercent >= 60) color = '#FF9800';
    1809. 

  1809. 

  1810.             circle.style.stroke = color;
    1811. 

  1811.             text.style.color = color;
    1812. 

  1812.             text.style.textShadow = `0 0 15px ${color}`;
    1813. 

  1813.             circle.parentElement.style.filter = `drop-shadow(0 0 12px ${color})`;
    1814. 

  1814. 

  1815.             const circumference = 2 * Math.PI * 54;
    1816. 

  1816.             circle.style.strokeDasharray = `${circumference} ${circumference}`;
    1817. 

  1817.             
    1818. 

  1818.             let current = 0; text.innerText = "0%";
    1819. 

  1819.             circle.style.strokeDashoffset = circumference;
    1820. 

  1820. 

  1821.             setTimeout(() => { circle.style.strokeDashoffset = circumference - (targetPercent / 100) * circumference; }, 50);
    1822. 

  1822. 

  1823.             const stepTime = Math.max(15, Math.floor(1200 / (targetPercent || 1)));
    1824. 

  1824.             const timer = setInterval(() => {
    1825. 

  1825.                 if (current < targetPercent) {
    1826. 

  1826.                     current++; text.innerText = `${current}%`; 
    1827. 

  1827.                     if (current % 4 === 0) playAudioCue('calcKey');
    1828. 

  1828.                 } else {
    1829. 

  1829.                     clearInterval(timer); text.innerText = `${targetPercent}%`; 
    1830. 

  1830.                     if (onFinish) onFinish();
    1831. 

  1831.                 }
    1832. 

  1832.             }, stepTime);
    1833. 

  1833.         }
    1834. 

  1834. 

  1835.         function checkTest(){
    1836. 

  1836.             clearInterval(quizTimerInterval);
    1837. 

  1837.             const total = quizQuestionsList.length; let score = 0;
    1838. 

  1838.             let explanationHTML = `<h4 style='margin-top:0; color:var(--accent); font-size:16px;'>${i18n[currentLang].testReviewTitle}</h4><ul style='padding-left: 18px; line-height:1.6;'>`;
    1839. 

  1839. 

  1840.             quizQuestionsList.forEach((item, idx) => {
    1841. 

  1841.                 const chosenOptIdx = quizAnswers[idx]; const isAnswered = (chosenOptIdx !== undefined); const isCorrect = isAnswered && item.opts[chosenOptIdx].c;
    1842. 

  1842.                 if (isCorrect) { score++; } else {
    1843. 

  1843.                     const correctOpt = item.opts.find(o => o.c);
    1844. 

  1844.                     const skippedTag = !isAnswered ? ` <span style="color:#f44336; font-weight:bold;">[${i18n[currentLang].testSkipped}]</span>` : '';
    1845. 

  1845.                     explanationHTML += `<li style='margin-bottom: 8px;'><b>№${idx + 1}:</b> ${item.q}${skippedTag}<br><span style='color:#00E676;'>✔ ${correctOpt ? correctOpt.t : ''}</span> — <i>${item.reason}</i> <br><a href="${item.link}" target="_blank" style="color:var(--base-wave); font-size:13px; text-decoration:none;">${i18n[currentLang].wikiLink}</a></li>`;
    1846. 

  1846.                 }
    1847. 

  1847.             });
    1848. 

  1848.             explanationHTML += `</ul>`;
    1849. 

  1849. 

  1850.             document.getElementById('quiz-card-wrapper').style.display = 'none';
    1851. 

  1851.             document.getElementById('quiz-nav-controls').style.display = 'none';
    1852. 

  1852.             document.getElementById('quizTimerBar').style.display = 'none';
    1853. 

  1853.             
    1854. 

  1854.             const resScreen = document.getElementById('test-result-screen');
    1855. 

  1855.             resScreen.style.display = 'block'; resScreen.classList.add('pop-animation');
    1856. 

  1856. 

  1857.             let pct = Math.round((score / total) * 100);
    1858. 

  1858.             const resText = document.getElementById('test-result-text');
    1859. 

  1859.             resText.innerHTML = `${i18n[currentLang].testResTitle} ${score} ${i18n[currentLang].testResOf} ${total}<br>`;
    1860. 

  1860. 

  1861.             animateScoreCounter(pct, () => {
    1862. 

  1862.                 if (pct >= 90) { resText.innerHTML += `<span style="color:#00E676;">${i18n[currentLang].testRes90}</span>`; playAudioCue('glassBell'); } 
    1863. 

  1863.                 else if (pct >= 60) { resText.innerHTML += `<span style="color:#FF9800;">${i18n[currentLang].testRes60}</span>`; playAudioCue('glassBell'); } 
    1864. 

  1864.                 else { resText.innerHTML += `<span style="color:#f44336;">${i18n[currentLang].testResLow}</span>`; playAudioCue('warn'); }
    1865. 

  1865.             });
    1866. 

  1866. 

  1867.             document.getElementById('quiz-explanation').innerHTML = explanationHTML;
    1868. 

  1868.         }
    1869. 

  1869. 

  1870.     </script>
    1871. 

  1871. </body>
    1872. 

  1872. </html>
    1873.