:root{
      --accent: var(--color-3);
      --bg: var(--color-4);
      --text: var(--color-9);
      --muted: var(--color-20);
      --border: var(--color-21);
      --radius: var(--size-4);

      /* euler: sharp */
      --e-axis:var(--color-22);
      --e-radius: var(--color-22);
      --e-dash: var(--color-23);
      --e-text: var(--color-24);
      --e-circle: var(--color-3);
    }

    *{box-sizing: border-box}
    body{
      margin: 0;
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .wrap{padding: var(--size-6);display: flex;justify-content: center}
    .page{width: 100%;max-width: var(--dimension-24);display: flex;flex-direction: column;gap: var(--size-17)}

    .card{
      background: var(--bg);
      border: var(--size-33) solid var(--border);
      border-radius: var(--radius);
      padding: var(--size-18);
    }

    h1{
      margin: 0 0 var(--size-7);
      font-family: var(--font-display);
      font-size: var(--size-51);
      line-height: 1.05;
      font-weight: 600;
      letter-spacing: var(--dimension-25);
      text-transform: none;
    }
    .subtitle{
      margin: 0;
      font-size: var(--size-17);
      line-height: 1.55;
      color: var(--muted);
      letter-spacing: var(--dimension-26);
      text-transform: none;
      white-space: pre-line;
    }

    .stack{display: flex;flex-direction: column;gap: var(--size-5)}

    /* buttons: black bg, red text */
    .btn{
      height: var(--dimension-27);
      border-radius: var(--size-4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 850;
      font-size: var(--size-2);
      letter-spacing: var(--dimension-26);
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      cursor: pointer;

      border: var(--size-33) solid var(--color-25);
      background: var(--color-2);
      color: var(--accent);
      transition: transform .12s ease, filter .12s ease;
      text-transform: none;
    }
    .btn:hover{ filter: brightness(1.02); }
    .btn:active{ transform: scale(.99); }

    .divider{
      height: var(--size-33);
      background: var(--color-26);
      margin: var(--size-32) 0;
    }

    .text{
      margin: 0;
      font-size: var(--size-17);
      line-height: 1.62;
      color: var(--muted);
      letter-spacing: var(--dimension-28);
      white-space: pre-line;
      text-transform: none;
    }

    .accent{ color: var(--accent); font-weight: 900; }

    .language-btn{
      width: 100%;
      height: var(--dimension-29);
      border-radius: var(--size-52);
      margin-bottom: var(--size-4);
    }

    .euler-footer{ padding: var(--size-2); overflow: hidden; }
    .euler-wrap{
      border-radius: var(--size-4);
      border: var(--size-33) solid var(--color-21);
      background: var(--color-1);
      overflow: hidden;
      padding: var(--size-17) var(--size-4) var(--size-4);
    }
    .euler-canvas{
      position: relative;
      width: 100%;
      height: var(--size-54);
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    #eulerScene{ width: 100%; height: 100%; display: block; }

    #axis-x, #axis-y{
      stroke: var(--e-axis);
      stroke-width: 18;
      stroke-linecap: round;
      fill: none;
    }
    #unit-circle{
      stroke: var(--e-circle);
      stroke-width: 120;
      fill: none;
    }
    #radius{
      stroke: var(--e-radius);
      stroke-width: 18;
      stroke-linecap: round;
      fill: none;
    }
    #angle-arc{
      stroke: var(--e-radius);
      stroke-width: 18;
      fill: none;
      stroke-linecap: round;
    }
    .dash{
      stroke: var(--e-dash);
      stroke-width: 14;
      stroke-linecap: round;
      stroke-dasharray: 62 62;
      fill: none;
    }

    #eulerScene text{ font-family: var(--font-body); font-weight: 900; }
    #re, #im{ font-size: var(--size-53); fill: var(--accent); opacity: 1; }
    #cos, #sin{ font-size: var(--size-53); fill: var(--e-text); }
    #angle-x{ font-size: var(--size-53); opacity: 0; fill: var(--e-text); }

    #point-i{ fill: var(--accent); opacity: 0; }
    #label-i{ font-size: var(--size-53); opacity: 0; fill: var(--accent); font-weight: 900; }

    #final-text{
      font-family: var(--font-display);
      font-size: var(--size-54);
      font-weight: 600;
      fill: var(--color-27);
      opacity: 0;
      text-anchor: middle;
    }
    #final-text tspan{ text-anchor: middle; }

    .euler-formulas{
      margin-top: var(--size-5);
      display: flex;
      flex-direction: column;
      gap: var(--size-7);
      align-items: center;
      text-align: center;
      user-select: none;
    }
    .euler-f1{
      font-family: var(--font-body);
      font-size: var(--size-17);
      font-weight: 900;
      color: var(--color-23);
      opacity: 0;
      transform: translateY(var(--size-7));
    }
    .euler-f2{
      font-family: var(--font-body);
      font-size: var(--size-18);
      font-weight: 900;
      color: var(--color-23);
      letter-spacing: var(--dimension-30);
      opacity: 0;
      transform: translateY(var(--size-3));
    }
    .euler-f2 .red, .euler-f1 .red{ color: var(--accent); }

    .lang-sheet{
      position: fixed;
      inset: 0;
      z-index: 9998;
      pointer-events: none;
      opacity: 0;
      transition: opacity .18s ease;
    }
    .lang-sheet.open{ opacity: 1; pointer-events: auto; }
    .lang-sheet-backdrop{ position: absolute; inset: 0; background: var(--color-28); }

    .lang-sheet-panel{
      max-height: 90dvh; overflow-y: auto;
      position: absolute;
      left: 0; right: 0; bottom: 0;
      background: var(--color-2);
      border-top-left-radius: var(--size-18);
      border-top-right-radius: var(--size-18);
      padding: var(--size-4) var(--size-17) var(--size-2);
      transform: translateY(var(--size-14));
      opacity: 0.98;
    }

    .lang-sheet.open .lang-sheet-panel{
      animation: sheetSpring .52s cubic-bezier(.18, 1.35, .28, 1) both;
    }
    @keyframes sheetSpring{
      0%{ transform: translateY(var(--dimension-31)); }
      60%{ transform: translateY(var(--dimension-32)); }
      100%{ transform: translateY(0); }
    }

    .lang-sheet-head{ display: flex; align-items: center; justify-content: space-between; padding: var(--size-7) var(--size-37) var(--size-5); }
    .lang-sheet-title{ font-family: var(--font-display); color: var(--color-1); text-transform: uppercase; letter-spacing: var(--dimension-33); font-size: var(--size-4); opacity: .75; }
    .lang-sheet-close{
      width: var(--size-28); height: var(--size-28);
      border-radius: var(--size-52);
      border: var(--size-33) solid var(--color-29);
      background: transparent;
      color: var(--color-1);
      font-size: var(--size-6);
      line-height: 1;
      cursor: pointer;
    }

    .lang-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--size-4) var(--size-5); padding-bottom: var(--size-32); }
    .lang-item{ min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--size-7); cursor: pointer; opacity: .75; transition: opacity .15s ease, transform .15s ease; }
    .lang-item:hover{ opacity: 1; transform: translateY(var(--dimension-34)); }
    .lang-item .ava{ width: var(--dimension-7); height: var(--dimension-7); border-radius: var(--size-52); overflow: hidden; border: var(--size-33) solid var(--color-30); background: var(--color-31); }
    .lang-item .ava img{ width: 100%; height: 100%; object-fit: cover; display: block; }
    .lang-item .label{ font-family: var(--font-display); font-size: var(--size-5); font-weight: 500; color: var(--color-1); opacity: .9; white-space: normal; overflow-wrap: anywhere; text-transform: none; }
    .lang-item.active{ opacity: 1; }
    .lang-item.active .ava{ border-color: var(--color-32); box-shadow: 0 0 0 var(--dimension-16) var(--color-33); }

    @media (max-width: 360px){
      .lang-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .euler-canvas{ height: var(--size-41); }
    }

    .toast{
      position: fixed;
      bottom: var(--size-6);
      left: 50%;
      transform: translateX(-50%);
      background: var(--color-34);
      color: var(--color-1);
      padding: var(--size-5) var(--size-17);
      border-radius: var(--size-4);
      font-size: var(--size-21);
      opacity: 0;
      transition: opacity .2s ease;
      pointer-events: none;
      z-index: 9999;
    }
    .toast.show{opacity: 1}

    [dir="rtl"] h1, [dir="rtl"] .subtitle, [dir="rtl"] .text{ text-align: right; }
  
button.lang-item{background: transparent;border: 0;color: inherit} :focus-visible{outline: var(--dimension-16) solid var(--color-3);outline-offset: var(--size-32)} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation: none!important;transition: none!important}}
html.script-font body,html.script-font h1,html.script-font button,html.script-font svg text{font-family: var(--script-font),sans-serif}