:root {
      --miku-cyan: #42f5ef;
      --miku-blue: #18b7d6;
      --miku-ink: #061318;
      --miku-dark: #03090d;
      --miku-glow: rgba(66, 245, 239, 0.45);
      --miku-panel: rgba(2, 10, 14, 0.8);
      --text-main: #dfffff;
      --text-soft: #95dada;
    }

    * {
      box-sizing: border-box;
      scrollbar-width: thin;
      scrollbar-color: #4ad4ff rgba(3, 18, 34, 0.88);
    }

    *::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    *::-webkit-scrollbar-track {
      background: rgba(3, 18, 34, 0.9);
      border: 1px solid rgba(66, 245, 239, 0.22);
      border-radius: 999px;
    }

    *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #5bf8ff 0%, #33b8ff 55%, #2b7dff 100%);
      border: 1px solid rgba(150, 228, 255, 0.65);
      border-radius: 999px;
      box-shadow: 0 0 8px rgba(66, 245, 239, 0.32);
    }

    *::-webkit-scrollbar-thumb:hover {
      filter: brightness(1.12);
      box-shadow: 0 0 12px rgba(66, 245, 239, 0.45);
    }

    *::-webkit-scrollbar-button {
      height: 10px;
      background: rgba(10, 34, 52, 0.95);
      border: 1px solid rgba(66, 245, 239, 0.35);
    }

    *::-webkit-scrollbar-corner {
      background: rgba(3, 18, 34, 0.95);
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Consolas", "Cascadia Code", "Fira Code", monospace;
      color: var(--text-main);
      background:
        linear-gradient(rgba(1, 8, 11, 0.76), rgba(1, 8, 11, 0.84)),
        url("ym-bg.gif") center/cover no-repeat;
      background-attachment: fixed;
      overflow-x: hidden;
      -webkit-text-size-adjust: 100%;
      text-rendering: optimizeLegibility;
      display: flex;
      flex-direction: column;
    }

    .topbar {
      width: min(1050px, 92vw);
      margin: 1.5rem auto 0.75rem;
      padding: 0.6rem 0.9rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid var(--miku-cyan);
      outline: 1px solid rgba(66, 245, 239, 0.3);
      outline-offset: 0;
      background: rgba(2, 9, 13, 0.72);
      box-shadow: 0 0 18px var(--miku-glow);
      animation: miku-spectrum-frame 8.2s linear infinite;
      position: relative;
    }

    .brand {
      color: var(--miku-cyan);
      font-weight: 700;
      letter-spacing: 0.02em;
      text-shadow: 0 0 10px var(--miku-glow);
    }

    .top-links {
      display: flex;
      align-items: center;
      gap: 0.55rem;
    }

    .home-btn {
      display: inline-block;
      color: var(--miku-dark);
      background: linear-gradient(90deg, var(--miku-cyan), var(--miku-blue));
      text-decoration: none;
      border: 1px solid rgba(255, 255, 255, 0.15);
      padding: 0.5rem 0.95rem;
      font-weight: 700;
      font-size: 0.95rem;
      box-shadow: 0 0 14px var(--miku-glow);
    }

    .home-btn,
    button,
    .profile-telegram-btn,
    .profile-modal-telegram-btn {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      --btn-rx: 0deg;
      --btn-ry: 0deg;
      --btn-shift-x: 0px;
      --btn-shift-y: 0px;
      --btn-gx: 50%;
      --btn-gy: 50%;
      --btn-lift: 0px;
      --btn-scale: 1;
      transform: translate3d(var(--btn-shift-x), calc(var(--btn-shift-y) + var(--btn-lift)), 0)
        rotateX(var(--btn-rx)) rotateY(var(--btn-ry)) scale(var(--btn-scale));
      transform-style: preserve-3d;
      transition: transform 160ms ease, box-shadow 220ms ease, filter 220ms ease;
      animation: button-idle 2.8s ease-in-out infinite;
    }

    button {
      font-family: inherit;
    }

    .home-btn:hover,
    button:hover,
    .profile-telegram-btn:hover,
    .profile-modal-telegram-btn:hover {
      --btn-lift: -2px;
      --btn-scale: 1.02;
      filter: brightness(1.14);
    }

    .home-btn:active,
    button:active,
    .profile-telegram-btn:active,
    .profile-modal-telegram-btn:active {
      --btn-lift: 0px;
      --btn-scale: 0.97;
    }

    .home-btn::before,
    button::before,
    .profile-telegram-btn::before,
    .profile-modal-telegram-btn::before,
    .home-btn::after,
    button::after,
    .profile-telegram-btn::after,
    .profile-modal-telegram-btn::after {
      display: none;
    }

    .home-btn.glitch-click,
    button.glitch-click,
    .profile-telegram-btn.glitch-click,
    .profile-modal-telegram-btn.glitch-click {
      animation: button-click-glitch 260ms steps(2, end) 1;
    }

    .home-btn.click-pop,
    button.click-pop,
    .profile-telegram-btn.click-pop,
    .profile-modal-telegram-btn.click-pop {
      animation:
        button-click-pop 240ms cubic-bezier(0.24, 0.7, 0.22, 1.2) 1,
        button-click-glitch 260ms steps(2, end) 1;
    }

    .home-btn.glitch-click::after,
    button.glitch-click::after,
    .profile-telegram-btn.glitch-click::after,
    .profile-modal-telegram-btn.glitch-click::after {
      animation: button-click-scan 260ms steps(2, end) 1;
    }

    .topbar,
    .terminal,
    .card,
    .diag-shell,
    .profile-card,
    .player-shell,
    .profile-modal-card {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .topbar::before,
    .terminal::before,
    .card::before,
    .diag-shell::before,
    .profile-card::before,
    .player-shell::before,
    .profile-modal-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      border-radius: inherit;
      padding: 1.5px;
      background: linear-gradient(
        115deg,
        #58f6ff 0%,
        #63c4ff 22%,
        #74a4ff 40%,
        #ff79d2 56%,
        #66efff 76%,
        #58f6ff 100%
      );
      background-size: 220% 220%;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0.95;
      filter: drop-shadow(0 0 8px rgba(96, 236, 255, 0.45));
      animation: rgb-overlay-wave 7.6s ease-in-out infinite;
    }

    .topbar > *,
    .terminal > *,
    .card > *,
    .diag-shell > *,
    .profile-card > *,
    .player-shell > *,
    .profile-modal-card > * {
      position: relative;
      z-index: 2;
    }

    /* Prevent corner artifacts on compact circular/pill controls. */
    .mini-btn::before,
    .mini-btn::after,
    .play-btn::before,
    .play-btn::after,
    #muteBtn::before,
    #muteBtn::after,
    .player-action-btn::before,
    .player-action-btn::after,
    .profile-modal-close::before,
    .profile-modal-close::after {
      display: none;
    }

    main {
      width: min(1280px, 95vw);
      margin: 0.75rem auto 2rem;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
      column-gap: 1.25rem;
      row-gap: 1.5rem;
    }

    .terminal,
    .player-shell {
      position: relative;
      overflow: hidden;
    }


    .terminal {
      border: 1px solid var(--miku-cyan);
      outline: 1px solid rgba(66, 245, 239, 0.28);
      outline-offset: 0;
      background: var(--miku-panel);
      box-shadow: 0 0 24px var(--miku-glow);
      padding: 1rem 1.2rem 1.3rem;
      animation: miku-spectrum-frame 8.2s linear infinite;
    }

    .term-head,
    .code {
      position: relative;
      z-index: 2;
    }

    .term-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      color: var(--text-soft);
      padding-bottom: 0.75rem;
      border-bottom: 1px dashed rgba(66, 245, 239, 0.28);
      margin-bottom: 1rem;
    }

    .term-left {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
    }

    .term-app-stack {
      display: grid;
      gap: 0.14rem;
      line-height: 1.12;
      margin-top: 1px;
    }

    .term-app-stack strong {
      color: #d7fbff;
      letter-spacing: 0.01em;
      text-shadow: 0 0 8px rgba(66, 245, 239, 0.2);
    }

    .term-app-sub {
      font-size: 0.72rem;
      color: #b3e5f5;
      letter-spacing: 0.03em;
      text-transform: none;
      opacity: 1;
      text-shadow: 0 0 6px rgba(66, 245, 239, 0.16);
    }

    .miku-badge {
      width: 58px;
      height: 58px;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid #ff4f7f;
      box-shadow:
        0 0 8px rgba(255, 79, 127, 0.6),
        0 0 16px rgba(255, 79, 127, 0.35);
      transform-origin: center;
      animation: badge-spectrum-wave 3s ease-in-out infinite;
    }

    .dots {
      display: inline-flex;
      gap: 0.35rem;
    }

    .dot {
      width: 11px;
      height: 11px;
      border-radius: 999px;
    }

    .dot-btn {
      width: 12px;
      height: 12px;
      padding: 0;
      border: none;
      outline: none;
      background: transparent;
      animation: none;
      transform: none;
      cursor: pointer;
      box-shadow: none;
      transition: transform 120ms ease, filter 120ms ease;
    }

    .dot-btn:hover {
      transform: scale(1.18);
      filter: brightness(1.18);
    }

    .dot-btn:active {
      transform: scale(0.95);
    }

    .dot-btn::after {
      display: none;
    }

    .dot-btn::before {
      display: none;
    }

    .dot.red { background: #ff5f57; }
    .dot.yellow { background: #ffbd2e; }
    .dot.green { background: #28c840; }

    .terminal.fx-random-shake {
      animation: miku-spectrum-frame 8.2s linear infinite, terminal-random-shake 320ms steps(2, end) 1;
    }

    .terminal.fx-random-flash {
      animation: miku-spectrum-frame 8.2s linear infinite, terminal-random-flash 340ms linear 1;
    }

    .terminal.fx-random-hue {
      animation: miku-spectrum-frame 8.2s linear infinite, terminal-random-hue 440ms ease-in-out 1;
    }

    .terminal.fx-random-wave {
      animation: miku-spectrum-frame 8.2s linear infinite, terminal-random-wave 420ms ease-in-out 1;
    }

    .code.fx-random-glitch {
      animation: terminal-random-code 340ms steps(2, end) 1;
    }

    .code {
      line-height: 1.65;
      font-size: clamp(0.95rem, 1.3vw, 1.08rem);
      white-space: pre-wrap;
    }

    .ascii-art {
      margin: 0.7rem 0 0.55rem;
      padding: 0;
      display: block;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: pre;
      font-family: "Consolas", "Cascadia Code", "Fira Code", "Courier New", monospace;
      font-variant-ligatures: none;
      line-height: 1.16;
      letter-spacing: 0;
      font-size: clamp(0.58rem, 1.22vw, 0.9rem);
      color: #c8f6ff;
      text-shadow: 0 0 8px rgba(77, 218, 255, 0.22);
      scrollbar-width: thin;
    }

    .typing-last {
      display: inline-block;
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      vertical-align: bottom;
      border-right: 2px solid rgba(126, 255, 255, 0.9);
      animation:
        typing-last-line 3.2s steps(44, end) 1.5s forwards,
        typing-caret 700ms steps(1, end) infinite;
      filter: drop-shadow(0 0 7px rgba(126, 255, 255, 0.35));
    }

    .output-line {
      display: block;
      opacity: 0;
      transform: translateY(4px);
      color: #c8f7f7;
      text-shadow: 0 0 8px rgba(88, 232, 255, 0.18);
      animation: terminal-output-line 420ms ease forwards;
    }

    .output-line-1 { animation-delay: 120ms; }
    .output-line-2 { animation-delay: 520ms; }
    .output-line-3 { animation-delay: 920ms; }
    .output-line-3,
    .typing-last {
      color: #d3feff;
    }

    .prompt {
      color: var(--miku-cyan);
      font-weight: 700;
    }

    .accent {
      color: #a8ffff;
      text-shadow: 0 0 12px rgba(123, 255, 255, 0.45);
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.85rem;
      grid-column: 1;
    }

    .card {
      border: 1px solid var(--miku-cyan);
      outline: 1px solid rgba(66, 245, 239, 0.22);
      outline-offset: 0;
      background: rgba(2, 10, 14, 0.78);
      padding: 1.35rem 1rem;
      text-align: center;
      box-shadow: 0 0 14px rgba(66, 245, 239, 0.25);
      transition: transform 180ms ease, box-shadow 180ms ease;
      animation: miku-spectrum-frame 8.2s linear infinite;
    }

    .card:hover {
      transform: translateY(-3px);
      box-shadow: 0 0 22px rgba(66, 245, 239, 0.45);
    }

    .card h3 {
      margin: 0;
      font-size: 1.2rem;
      color: var(--miku-cyan);
    }

    .card p {
      margin: 0.7rem 0 0;
      color: var(--text-soft);
      font-size: 0.95rem;
    }

    .diag-shell {
      grid-column: 1;
      border: 1px solid var(--miku-cyan);
      outline: 1px solid rgba(66, 245, 239, 0.22);
      background: rgba(2, 10, 16, 0.9);
      box-shadow: 0 0 18px rgba(66, 245, 239, 0.24);
      border-radius: 12px;
      padding: 0.95rem;
      animation: miku-spectrum-frame 8.2s linear infinite;
    }

    .diag-head h2 {
      margin: 0;
      color: #d8faff;
      font-size: 1.08rem;
      font-family: "Orbitron", "Segoe UI", "Trebuchet MS", sans-serif;
      letter-spacing: 0.03em;
    }

    .diag-head p {
      margin: 0.3rem 0 0.8rem;
      color: #a4d4df;
      font-size: 0.84rem;
    }

    .diag-tabs {
      display: flex;
      gap: 0.4rem;
      margin-bottom: 0.75rem;
    }

    .diag-tab {
      border: 1px solid rgba(111, 182, 255, 0.6);
      background: rgba(6, 24, 37, 0.88);
      border-radius: 8px;
      color: #cbeeff;
      padding: 0.42rem 0.78rem;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .diag-tab.is-active {
      border-color: rgba(66, 245, 239, 0.75);
      background: rgba(4, 38, 54, 0.92);
      color: #d8ffff;
      box-shadow: inset 0 0 0 1px rgba(66, 245, 239, 0.22);
    }

    .diag-panel {
      display: none;
      gap: 0.65rem;
    }

    .diag-panel.is-active {
      display: grid;
    }

    .diag-panel[hidden] {
      display: none !important;
    }

    .diag-form {
      display: grid;
      gap: 0.48rem;
    }

    .diag-row {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      align-items: center;
      gap: 0.7rem;
    }

    .diag-row span {
      color: #d6eef5;
      font-size: 0.78rem;
      line-height: 1.25;
    }

    .diag-row input {
      width: 100%;
      border: 1px solid rgba(120, 185, 231, 0.5);
      border-radius: 7px;
      background: rgba(7, 23, 33, 0.88);
      color: #dfffff;
      padding: 0.42rem 0.5rem;
      font-size: 0.78rem;
      outline: none;
      font-family: "Consolas", "Cascadia Code", "Fira Code", monospace;
    }

    .diag-row input:focus {
      border-color: rgba(66, 245, 239, 0.75);
      box-shadow: 0 0 0 2px rgba(66, 245, 239, 0.14);
    }

    .diag-row input[readonly] {
      color: #9fd4ea;
      background: rgba(4, 17, 26, 0.82);
    }

    .diag-ip-wrap {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      min-width: 0;
    }

    .diag-ip-wrap input {
      flex: 1;
      width: auto;
    }

    .diag-ip-flag {
      flex: 0 0 40px;
      height: 36px;
      border: 1px solid rgba(66, 245, 239, 0.46);
      border-radius: 7px;
      background: rgba(3, 22, 35, 0.88);
      display: grid;
      place-items: center;
      font-size: 1.02rem;
      line-height: 1;
      color: #d7fbff;
      box-shadow: inset 0 0 10px rgba(66, 245, 239, 0.15);
      user-select: none;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      overflow: hidden;
      font-weight: 700;
    }

    .diag-ip-flag.has-flag {
      color: transparent;
      text-shadow: none;
    }

    .diag-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.52rem;
    }

    .diag-start-btn,
    .diag-switch-btn {
      border: 1px solid rgba(112, 184, 243, 0.68);
      border-radius: 8px;
      color: #eaf7ff;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      padding: 0.5rem 0.84rem;
      min-width: 136px;
    }

    .diag-start-btn {
      background: linear-gradient(90deg, rgba(49, 175, 255, 0.92), rgba(72, 226, 240, 0.92));
      color: #02121a;
    }

    .diag-switch-btn {
      background: rgba(8, 28, 44, 0.92);
      color: #d4ecff;
    }

    .diag-output {
      margin: 0;
      border: 1px solid rgba(66, 245, 239, 0.25);
      border-radius: 8px;
      background: rgba(1, 16, 27, 0.9);
      color: #bcd5dd;
      padding: 0.56rem 0.62rem;
      min-height: 180px;
      max-height: 290px;
      overflow: auto;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 0.76rem;
      line-height: 1.4;
      font-family: "Consolas", "Cascadia Code", "Fira Code", monospace;
    }


    .player-wrap {
      grid-column: 2;
      grid-row: 1 / span 2;
      position: sticky;
      top: 1rem;
      align-self: start;
      z-index: 20;
      display: block;
      margin: 0;
    }

    .profile-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.95rem;
      text-decoration: none;
      color: #d6f5ff;
      border: 1px solid rgba(70, 175, 255, 0.5);
      outline: 1px solid rgba(66, 245, 239, 0.22);
      background:
        radial-gradient(130% 120% at 10% 0%, rgba(40, 158, 255, 0.18), transparent 55%),
        radial-gradient(140% 120% at 95% 100%, rgba(44, 80, 255, 0.16), transparent 55%),
        rgba(2, 9, 20, 0.88);
      border-radius: 22px;
      padding: 1.08rem 0.96rem;
      min-height: 248px;
      box-shadow: 0 0 16px rgba(44, 166, 255, 0.22);
      margin-bottom: 0.75rem;
      animation: miku-spectrum-frame 8.2s linear infinite;
      perspective: 1000px;
      transform-style: preserve-3d;
      transform: rotateX(var(--profile-tilt-x, 0deg)) rotateY(var(--profile-tilt-y, 0deg));
      transition: transform 180ms ease, filter 180ms ease;
      will-change: transform;
    }

    .profile-avatar {
      width: 128px;
      height: 128px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(66, 245, 239, 0.75);
      box-shadow: 0 0 12px rgba(66, 245, 239, 0.42);
      flex: 0 0 auto;
      transform: translate3d(var(--profile-img-x, 0px), var(--profile-img-y, 0px), 26px);
      transition: transform 160ms ease;
      will-change: transform;
    }

    .profile-meta {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      min-width: 0;
      align-items: center;
      text-align: center;
      transform: translate3d(calc(var(--profile-img-x, 0px) * 0.45), calc(var(--profile-img-y, 0px) * 0.45), 10px);
      transition: transform 160ms ease;
      will-change: transform;
    }

    .profile-handle {
      font-family: "Orbitron", "Segoe UI", "Trebuchet MS", sans-serif;
      font-size: 1.08rem;
      font-weight: 700;
      line-height: 1.32;
      letter-spacing: 0.02em;
      text-shadow: 0 0 8px rgba(66, 245, 239, 0.3);
      word-break: break-word;
    }

    .profile-desc {
      font-family: "Consolas", "Cascadia Code", "Fira Code", monospace;
      font-size: 0.82rem;
      line-height: 1.32;
      color: #b8e8f7;
      opacity: 0.95;
      word-break: break-word;
    }

    .profile-card:hover {
      filter: brightness(1.03);
    }

    .profile-card.is-tilting {
      transition: none;
    }

    .profile-card.is-tilting .profile-avatar,
    .profile-card.is-tilting .profile-meta {
      transition: none;
    }

    .profile-telegram-btn {
      margin-top: 0.22rem;
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      text-decoration: none;
      color: #e8f8ff;
      border: 1px solid rgba(120, 198, 255, 0.72);
      border-radius: 999px;
      padding: 0.34rem 0.62rem;
      background: linear-gradient(90deg, rgba(21, 111, 210, 0.92), rgba(43, 170, 255, 0.92));
      box-shadow: 0 0 12px rgba(71, 177, 255, 0.35);
      font-family: "Orbitron", "Segoe UI", "Trebuchet MS", sans-serif;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
    }

    .profile-telegram-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.08);
      box-shadow: 0 0 16px rgba(71, 177, 255, 0.5);
    }

    .telegram-icon {
      width: 14px;
      height: 14px;
      fill: currentColor;
      flex: 0 0 auto;
    }

    .profile-modal {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding: 1rem;
    }

    .profile-modal[hidden] {
      display: none !important;
    }

    .profile-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(2, 8, 15, 0.76);
      backdrop-filter: blur(5px);
    }

    .profile-modal-card {
      position: relative;
      z-index: 1;
      width: min(560px, 94vw);
      border: 1px solid rgba(70, 175, 255, 0.68);
      outline: 1px solid rgba(66, 245, 239, 0.28);
      border-radius: 24px;
      background:
        radial-gradient(130% 120% at 10% 0%, rgba(40, 158, 255, 0.22), transparent 55%),
        radial-gradient(140% 120% at 95% 100%, rgba(44, 80, 255, 0.2), transparent 55%),
        rgba(2, 9, 20, 0.95);
      box-shadow:
        0 22px 38px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(44, 166, 255, 0.28);
      padding: 1.25rem 1.1rem 1.2rem;
      display: grid;
      justify-items: center;
      gap: 0.78rem;
      animation: profile-pop-in 220ms ease-out;
    }

    .profile-modal-close {
      position: absolute;
      top: 0.62rem;
      right: 0.62rem;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid rgba(120, 189, 255, 0.72);
      background: rgba(7, 24, 40, 0.9);
      color: #d8ecff;
      font-size: 0.76rem;
      font-weight: 800;
      line-height: 1;
      display: grid;
      place-items: center;
      padding: 0;
      animation: none;
    }

    .profile-modal-avatar {
      width: 210px;
      height: 210px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(66, 245, 239, 0.78);
      box-shadow: 0 0 20px rgba(66, 245, 239, 0.42);
      margin-top: 0.16rem;
    }

    .profile-modal-meta {
      text-align: center;
      display: grid;
      gap: 0.36rem;
      width: 100%;
      justify-items: center;
    }

    .profile-modal-handle {
      margin: 0;
      font-family: "Orbitron", "Segoe UI", "Trebuchet MS", sans-serif;
      font-size: 1.52rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #d8f5ff;
      text-shadow: 0 0 10px rgba(66, 245, 239, 0.35);
    }

    .profile-modal-desc {
      margin: 0;
      font-size: 0.96rem;
      line-height: 1.4;
      color: #c0e7f7;
      max-width: 92%;
    }

    .profile-modal-handle,
    .profile-modal-desc,
    .profile-modal-telegram-btn span {
      background:
        linear-gradient(
          105deg,
          #e9fdff 0%,
          #66f7ff 20%,
          #78a8ff 42%,
          #ff8ecb 63%,
          #7dfdff 84%,
          #e9fdff 100%
        );
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: rgb-text-wave 4.8s linear infinite;
    }

    .profile-modal-desc {
      animation-duration: 6.4s;
      filter: drop-shadow(0 0 4px rgba(100, 238, 255, 0.28));
    }

    .profile-modal-telegram-btn {
      animation:
        button-idle 2.8s ease-in-out infinite,
        button-rgb-pulse 2.1s ease-in-out infinite;
    }

    .profile-modal-telegram-btn {
      margin-top: 0.28rem;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      text-decoration: none;
      color: #e8f8ff;
      border: 1px solid rgba(120, 198, 255, 0.72);
      border-radius: 999px;
      padding: 0.46rem 0.84rem;
      background: linear-gradient(90deg, rgba(21, 111, 210, 0.92), rgba(43, 170, 255, 0.92));
      box-shadow: 0 0 14px rgba(71, 177, 255, 0.4);
      font-family: "Orbitron", "Segoe UI", "Trebuchet MS", sans-serif;
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .player-shell {
      width: 100%;
      border-radius: 28px;
      border: 1px solid rgba(70, 175, 255, 0.5);
      outline: 1px solid rgba(66, 245, 239, 0.22);
      outline-offset: 0;
      background:
        radial-gradient(130% 120% at 10% 0%, rgba(40, 158, 255, 0.22), transparent 55%),
        radial-gradient(140% 120% at 95% 100%, rgba(44, 80, 255, 0.2), transparent 55%),
        rgba(2, 9, 20, 0.9);
      box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(44, 166, 255, 0.2);
      padding: 0.9rem 0.85rem 1rem;
      font-family: "Orbitron", "Segoe UI", "Trebuchet MS", sans-serif;
      backdrop-filter: blur(4px);
      animation: miku-spectrum-frame 8.2s linear infinite;
    }

    .player-shell > * {
      position: relative;
      z-index: 2;
    }

    .player-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.35rem;
      margin-bottom: 0.38rem;
    }

    .player-action-btn {
      width: 24px;
      height: 24px;
      border: 1px solid rgba(111, 182, 255, 0.7);
      border-radius: 6px;
      background: rgba(8, 24, 42, 0.92);
      padding: 0;
      display: grid;
      place-items: center;
      cursor: pointer;
      animation: none;
    }

    .player-action-btn.is-hidden {
      display: none;
    }

    .icon-min {
      width: 10px;
      height: 2px;
      background: #cde7ff;
      border-radius: 999px;
      display: block;
    }

    .icon-max {
      width: 10px;
      height: 8px;
      border: 2px solid #cde7ff;
      border-radius: 1px;
      display: block;
      box-sizing: border-box;
    }

    .player-head {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.6rem;
    }

    .disc-wrap {
      width: 208px;
      height: 208px;
      margin: 0 auto;
      position: relative;
      border-radius: 50%;
      border: 1px solid rgba(104, 154, 248, 0.8);
      box-shadow:
        inset 0 0 22px rgba(23, 118, 255, 0.18),
        0 0 20px rgba(66, 159, 255, 0.4);
      padding: 0;
      background: rgba(9, 24, 42, 0.95);
      overflow: visible;
    }

    .disc-wave {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 2px solid rgba(57, 245, 239, 0.55);
      box-shadow: 0 0 16px rgba(57, 245, 239, 0.34);
      opacity: 0;
      transform: scale(0.86);
      pointer-events: none;
      z-index: 0;
      animation: disc-audio-wave 1.8s ease-out infinite;
      animation-play-state: paused;
    }

    .disc-wave.wave-b {
      animation-delay: 0.9s;
    }

    .disc-wrap::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 2px solid rgba(200, 238, 255, 0.8);
      background: radial-gradient(circle, #0b2740 0%, #081a2f 70%);
      box-shadow: 0 0 10px rgba(69, 165, 255, 0.5);
      z-index: 3;
    }

    .disc-art {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      animation: spin-disc 5s linear infinite;
      animation-play-state: paused;
      filter: saturate(1.08) contrast(1.04);
      display: block;
      position: relative;
      z-index: 2;
    }

    .disc-time {
      position: absolute;
      left: 50%;
      bottom: 12px;
      transform: translateX(-50%);
      z-index: 5;
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      padding: 0.22rem 0.48rem;
      border-radius: 999px;
      border: 1px solid rgba(165, 214, 255, 0.72);
      background: rgba(3, 15, 28, 0.65);
      color: #e5f5ff;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-shadow: 0 0 8px rgba(72, 198, 255, 0.44);
    }

    .time-sep {
      opacity: 0.78;
    }

    .player-shell.playing .disc-art {
      animation-play-state: running;
    }

    .player-shell.playing .disc-wave {
      animation-play-state: running;
    }

    .player-shell.is-minimized {
      width: min(260px, 100%);
      padding: 0.65rem 0.62rem 0.7rem;
      border-radius: 18px;
    }

    .player-shell.is-minimized .player-head {
      margin-bottom: 0.45rem;
    }

    .player-shell.is-minimized .disc-wrap {
      width: 132px;
      height: 132px;
    }

    .player-shell.is-minimized .disc-time {
      font-size: 0.62rem;
      bottom: 8px;
      padding: 0.16rem 0.38rem;
    }

    .player-shell.is-minimized .visualizer,
    .player-shell.is-minimized .seek,
    .player-shell.is-minimized .autoplay-note {
      display: none;
    }

    .player-shell.is-minimized .controls {
      gap: 0.3rem;
      margin-top: 0.25rem;
    }

    .player-shell.is-minimized .mini-btn {
      width: 33px;
      height: 33px;
      font-size: 0.5rem;
    }

    .player-shell.is-minimized #muteBtn {
      width: 54px;
      font-size: 0.48rem;
    }

    .player-shell.is-minimized .play-btn {
      width: 45px;
      height: 45px;
      font-size: 0.55rem;
    }


    .visualizer {
      height: 64px;
      display: flex;
      align-items: flex-end;
      gap: 0.2rem;
      margin-bottom: 0.6rem;
      padding: 0 0.1rem;
    }

    .bar {
      flex: 1;
      min-width: 4px;
      height: var(--h, 40%);
      border-radius: 999px;
      background: linear-gradient(180deg, #48f3ff 0%, #2e8dff 55%, #8023ff 100%);
      box-shadow: 0 0 14px rgba(80, 130, 255, 0.35);
      transform-origin: bottom;
      animation: wave 1050ms ease-in-out infinite;
      animation-delay: var(--d, 0ms);
      animation-play-state: paused;
    }

    .player-shell.playing .bar {
      animation-play-state: running;
    }

    .seek {
      width: 100%;
      margin: 0 0 0.72rem;
      accent-color: #2f8dff;
      cursor: pointer;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.42rem;
    }

    .mini-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(170, 196, 240, 0.5);
      background: rgba(10, 23, 41, 0.85);
      color: #d5e7ff;
      font-size: 0.62rem;
      font-weight: 700;
      cursor: pointer;
    }

    #muteBtn {
      width: 64px;
      border-radius: 999px;
      font-size: 0.56rem;
      letter-spacing: 0.03em;
      padding: 0 0.35rem;
    }

    .play-btn {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 1px solid rgba(111, 182, 255, 0.7);
      background: radial-gradient(circle at 35% 25%, #59acff, #1f74e8 70%);
      color: #e9f4ff;
      font-size: 0.66rem;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 0 20px rgba(59, 141, 255, 0.5);
    }

    .autoplay-note {
      margin: 0.6rem 0 0;
      color: #b1d4ff;
      text-align: center;
      font-size: 0.74rem;
    }

    .legal {
      text-align: center;
      color: #c8f5f4;
      font-size: 0.83rem;
      letter-spacing: 0.08em;
      line-height: 1.5;
      margin-bottom: 1.2rem;
      text-transform: uppercase;
    }

    .go-top-btn {
      position: fixed;
      right: 1rem;
      bottom: 1rem;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid rgba(66, 245, 239, 0.75);
      background: radial-gradient(circle at 35% 28%, #66f7ff, #1e82da 72%);
      color: #041015;
      font-size: 1.05rem;
      font-weight: 900;
      line-height: 1;
      display: grid;
      place-items: center;
      box-shadow: 0 0 20px rgba(66, 245, 239, 0.45);
      cursor: pointer;
      opacity: 0;
      transform: translateY(10px) scale(0.92);
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
      z-index: 60;
      animation: none;
    }

    .go-top-btn.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .go-top-btn:hover {
      filter: brightness(1.12);
      transform: translateY(-1px) scale(1.03);
    }

    @media (max-width: 860px) {
      main {
        width: min(1050px, 92vw);
        grid-template-columns: 1fr;
        column-gap: 0;
      }

      .terminal,
      .cards,
      .diag-shell,
      .player-wrap {
        grid-column: 1;
      }

      .cards {
        grid-template-columns: 1fr;
      }

      .topbar {
        gap: 0.8rem;
        flex-wrap: wrap;
      }

      .player-shell {
        width: min(320px, 100%);
        border-radius: 24px;
        padding: 0.82rem 0.78rem 0.9rem;
      }

      .player-shell.is-minimized {
        width: min(240px, 100%);
      }

      .diag-row {
        grid-template-columns: 1fr;
        gap: 0.32rem;
      }

      .diag-start-btn,
      .diag-switch-btn {
        width: 100%;
      }

      .profile-card {
        width: min(320px, 100%);
        padding: 0.84rem 0.78rem;
        min-height: 204px;
      }

      .profile-avatar {
        width: 98px;
        height: 98px;
      }

      .profile-modal-card {
        width: min(450px, 94vw);
        padding: 1rem 0.86rem 0.92rem;
      }

      .profile-modal-avatar {
        width: 164px;
        height: 164px;
      }

      .profile-modal-handle {
        font-size: 1.2rem;
      }

      .profile-modal-desc {
        font-size: 0.84rem;
      }

      .profile-card {
        transform: none !important;
      }

      .profile-avatar,
      .profile-meta {
        transform: none !important;
      }

      .profile-handle {
        font-size: 0.98rem;
      }

      .profile-desc {
        font-size: 0.76rem;
      }

      .profile-telegram-btn {
        font-size: 0.7rem;
      }

      .player-wrap {
        position: static;
      }

      .go-top-btn {
        width: 44px;
        height: 44px;
        right: 0.75rem;
        bottom: 0.75rem;
      }

      .disc-wrap {
        width: 180px;
        height: 180px;
      }

      .disc-time {
        font-size: 0.66rem;
      }

      .mini-btn {
        width: 38px;
        height: 38px;
      }

      #muteBtn {
        width: 62px;
        font-size: 0.52rem;
      }

      .play-btn {
        width: 54px;
        height: 54px;
      }
    }

    @keyframes wave {
      0% { transform: scaleY(0.38); }
      50% { transform: scaleY(1); }
      100% { transform: scaleY(0.45); }
    }

    @keyframes profile-pop-in {
      0% {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes spin-disc {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes button-idle {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.1); }
    }

    @keyframes button-rgb-pulse {
      0%, 100% {
        box-shadow:
          0 0 12px rgba(71, 177, 255, 0.4),
          0 0 0 0 rgba(122, 244, 255, 0.26);
      }
      50% {
        box-shadow:
          0 0 18px rgba(155, 112, 255, 0.5),
          0 0 0 5px rgba(122, 244, 255, 0.1);
      }
    }

    @keyframes rgb-text-wave {
      0% { background-position: 0% 50%; }
      100% { background-position: 220% 50%; }
    }

    @keyframes rgb-overlay-wave {
      0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 8px rgba(96, 236, 255, 0.45)) hue-rotate(0deg) saturate(1.05);
        opacity: 0.92;
      }
      50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 9px rgba(160, 130, 255, 0.5)) hue-rotate(70deg) saturate(1.25);
        opacity: 1;
      }
    }

    @keyframes button-click-pop {
      0% {
        transform: translate3d(var(--btn-shift-x), calc(var(--btn-shift-y) + var(--btn-lift)), 0)
          rotateX(var(--btn-rx)) rotateY(var(--btn-ry)) scale(1);
      }
      45% {
        transform: translate3d(var(--btn-shift-x), calc(var(--btn-shift-y) + var(--btn-lift) - 1px), 0)
          rotateX(var(--btn-rx)) rotateY(var(--btn-ry)) scale(1.08);
      }
      100% {
        transform: translate3d(var(--btn-shift-x), calc(var(--btn-shift-y) + var(--btn-lift)), 0)
          rotateX(var(--btn-rx)) rotateY(var(--btn-ry)) scale(1);
      }
    }

    @keyframes button-click-glitch {
      0% {
        transform: translateX(0) scale(1);
        filter: hue-rotate(0deg) saturate(1);
      }
      20% {
        transform: translateX(-2px) scale(1.02) skewX(-2deg);
        filter: hue-rotate(55deg) saturate(1.25);
      }
      40% {
        transform: translateX(2px) scale(0.98) skewX(2deg);
        filter: hue-rotate(-45deg) saturate(1.45);
      }
      65% {
        transform: translateX(-1px) scale(1.01);
        filter: hue-rotate(32deg) saturate(1.15);
      }
      100% {
        transform: translateX(0) scale(1);
        filter: hue-rotate(0deg) saturate(1);
      }
    }

    @keyframes button-click-scan {
      0% {
        opacity: 0;
        transform: translateX(-130%) skewX(-14deg);
      }
      35% {
        opacity: 0.88;
      }
      100% {
        opacity: 0;
        transform: translateX(130%) skewX(-14deg);
      }
    }

    @keyframes terminal-random-shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-3px); }
      50% { transform: translateX(3px); }
      75% { transform: translateX(-2px); }
      100% { transform: translateX(0); }
    }

    @keyframes terminal-random-flash {
      0% { filter: brightness(1); }
      50% { filter: brightness(1.4) saturate(1.2); }
      100% { filter: brightness(1); }
    }

    @keyframes terminal-random-hue {
      0% { filter: hue-rotate(0deg) saturate(1); }
      50% { filter: hue-rotate(55deg) saturate(1.35); }
      100% { filter: hue-rotate(0deg) saturate(1); }
    }

    @keyframes terminal-random-wave {
      0% { transform: scale(1); }
      50% { transform: scale(1.012); }
      100% { transform: scale(1); }
    }

    @keyframes terminal-random-code {
      0% {
        transform: translateX(0);
        text-shadow: none;
      }
      35% {
        transform: translateX(-1px);
        text-shadow:
          1px 0 0 rgba(255, 85, 169, 0.7),
          -1px 0 0 rgba(56, 255, 221, 0.7);
      }
      70% {
        transform: translateX(1px);
        text-shadow:
          -1px 0 0 rgba(255, 85, 169, 0.7),
          1px 0 0 rgba(56, 255, 221, 0.7);
      }
      100% {
        transform: translateX(0);
        text-shadow: none;
      }
    }

    @keyframes typing-last-line {
      0% { max-width: 0; }
      100% { max-width: 100%; }
    }

    @keyframes typing-caret {
      0%, 49% { border-right-color: rgba(126, 255, 255, 0.95); }
      50%, 100% { border-right-color: transparent; }
    }

    @keyframes terminal-output-line {
      0% {
        opacity: 0;
        transform: translateY(4px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes disc-audio-wave {
      0% {
        opacity: 0;
        transform: scale(0.86);
      }
      35% {
        opacity: 0.62;
      }
      100% {
        opacity: 0;
        transform: scale(1.22);
      }
    }

    @keyframes badge-spectrum-wave {
      0% {
        border-color: #ff4f7f;
        box-shadow:
          0 0 6px rgba(255, 79, 127, 0.72),
          0 0 14px rgba(255, 79, 127, 0.48),
          0 0 0 0 rgba(255, 79, 127, 0.4);
        transform: scale(1);
      }
      16% {
        border-color: #ff9b4a;
        box-shadow:
          0 0 8px rgba(255, 155, 74, 0.75),
          0 0 18px rgba(255, 155, 74, 0.48),
          0 0 0 5px rgba(255, 155, 74, 0.16);
        transform: scale(1.03);
      }
      32% {
        border-color: #ffe66d;
        box-shadow:
          0 0 8px rgba(255, 230, 109, 0.76),
          0 0 18px rgba(255, 230, 109, 0.5),
          0 0 0 6px rgba(255, 230, 109, 0.16);
        transform: scale(1.045);
      }
      48% {
        border-color: #37ff6b;
        box-shadow:
          0 0 8px rgba(55, 255, 107, 0.75),
          0 0 18px rgba(55, 255, 107, 0.5),
          0 0 0 6px rgba(55, 255, 107, 0.16);
        transform: scale(1.045);
      }
      64% {
        border-color: #39f5ef;
        box-shadow:
          0 0 8px rgba(57, 245, 239, 0.78),
          0 0 19px rgba(57, 245, 239, 0.54),
          0 0 0 7px rgba(57, 245, 239, 0.15);
        transform: scale(1.03);
      }
      80% {
        border-color: #4aa0ff;
        box-shadow:
          0 0 8px rgba(74, 160, 255, 0.78),
          0 0 19px rgba(74, 160, 255, 0.54),
          0 0 0 8px rgba(74, 160, 255, 0.14);
        transform: scale(1.02);
      }
      100% {
        border-color: #ff4f7f;
        box-shadow:
          0 0 6px rgba(255, 79, 127, 0.72),
          0 0 14px rgba(255, 79, 127, 0.48),
          0 0 0 0 rgba(255, 79, 127, 0.4);
        transform: scale(1);
      }
    }

    @keyframes miku-spectrum-frame {
      0% {
        border-color: #39f5ef;
        outline-color: rgba(57, 245, 239, 0.34);
      }
      20% {
        border-color: #53ffd0;
        outline-color: rgba(83, 255, 208, 0.34);
      }
      40% {
        border-color: #4ad4ff;
        outline-color: rgba(74, 212, 255, 0.34);
      }
      60% {
        border-color: #2aa8ff;
        outline-color: rgba(42, 168, 255, 0.34);
      }
      80% {
        border-color: #6a9fff;
        outline-color: rgba(106, 159, 255, 0.34);
      }
      100% {
        border-color: #39f5ef;
        outline-color: rgba(57, 245, 239, 0.34);
      }
    }
/* Device Compatibility Patch */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1200px) {
  main {
    width: min(1160px, 94vw);
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  }
}

@media (max-width: 1024px) {
  body {
    background-attachment: scroll;
  }

  main {
    width: min(1050px, 94vw);
    grid-template-columns: 1fr;
    row-gap: 1.2rem;
  }

  .terminal,
  .cards,
  .diag-shell,
  .player-wrap {
    grid-column: 1;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-wrap {
    position: static;
    top: auto;
    align-self: auto;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }

  .player-shell {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  .diag-row {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {
  .topbar {
    width: min(96vw, 640px);
    margin-top: 0.9rem;
    padding: 0.58rem 0.66rem;
    gap: 0.5rem;
  }

  .brand {
    font-size: 0.84rem;
    word-break: break-word;
  }

  .home-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.72rem;
  }

  main {
    width: 94vw;
    margin-top: 0.4rem;
    row-gap: 1rem;
  }

  .terminal {
    padding: 0.74rem 0.78rem 0.9rem;
  }

  .term-head {
    gap: 0.55rem;
    padding-bottom: 0.55rem;
    margin-bottom: 0.7rem;
  }

  .miku-badge {
    width: 46px;
    height: 46px;
  }

  .code {
    font-size: 0.84rem;
    line-height: 1.54;
    overflow-wrap: anywhere;
  }

  .ascii-art {
    margin: 0.56rem 0 0.48rem;
    font-size: clamp(0.5rem, 2.1vw, 0.74rem);
    line-height: 1.12;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .diag-shell {
    padding: 0.72rem;
  }

  .diag-tabs {
    flex-wrap: wrap;
  }

  .diag-output {
    min-height: 160px;
    max-height: 240px;
  }

  .profile-card {
    width: 100%;
    min-height: 210px;
    border-radius: 18px;
    padding: 0.78rem 0.66rem;
  }

  .profile-avatar {
    width: 100px;
    height: 100px;
  }

  .profile-handle {
    font-size: 0.93rem;
  }

  .profile-desc {
    font-size: 0.75rem;
  }

  .player-shell {
    width: 100%;
    border-radius: 20px;
    padding: 0.72rem 0.64rem 0.82rem;
  }

  .disc-wrap {
    width: 156px;
    height: 156px;
  }

  .disc-time {
    font-size: 0.62rem;
    bottom: 8px;
  }

  .visualizer {
    height: 52px;
    margin-bottom: 0.45rem;
  }

  .controls {
    gap: 0.34rem;
  }

  .mini-btn {
    width: 34px;
    height: 34px;
    font-size: 0.54rem;
  }

  #muteBtn {
    width: 56px;
    font-size: 0.5rem;
  }

  .play-btn {
    width: 50px;
    height: 50px;
    font-size: 0.58rem;
  }

  .player-shell.is-minimized {
    width: 100%;
    max-width: 240px;
  }

  .player-shell.is-minimized .disc-wrap {
    width: 112px;
    height: 112px;
  }

  .profile-modal-card {
    width: 94vw;
    border-radius: 18px;
    padding: 0.9rem 0.7rem 0.82rem;
  }

  .profile-modal-avatar {
    width: 146px;
    height: 146px;
  }

  .profile-modal-handle {
    font-size: 1.06rem;
  }

  .profile-modal-desc {
    font-size: 0.8rem;
    max-width: 96%;
  }

  .go-top-btn {
    right: 0.65rem;
    bottom: 0.65rem;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 420px) {
  .topbar {
    flex-wrap: wrap;
  }

  .top-links {
    width: 100%;
    flex-direction: column;
  }

  .home-btn {
    width: 100%;
    text-align: center;
  }

  .player-shell {
    max-width: 100%;
  }

  .player-shell.is-minimized {
    max-width: 100%;
  }

  .disc-wrap {
    width: 144px;
    height: 144px;
  }

  .controls {
    gap: 0.28rem;
  }

  .mini-btn {
    width: 32px;
    height: 32px;
    font-size: 0.5rem;
  }

  #muteBtn {
    width: 52px;
    font-size: 0.46rem;
  }

  .play-btn {
    width: 46px;
    height: 46px;
    font-size: 0.54rem;
  }

  .ascii-art {
    font-size: clamp(0.46rem, 2.8vw, 0.62rem);
    line-height: 1.08;
  }

}

@media (hover: none), (pointer: coarse) {
  body {
    background-attachment: scroll;
  }

  .home-btn,
  button,
  .profile-telegram-btn,
  .profile-modal-telegram-btn {
    animation: none;
  }

  .topbar,
  .terminal,
  .card,
  .diag-shell,
  .profile-card,
  .player-shell,
  .profile-modal-card {
    animation: none;
  }

  .topbar::before,
  .terminal::before,
  .card::before,
  .diag-shell::before,
  .profile-card::before,
  .player-shell::before,
  .profile-modal-card::before {
    animation-duration: 12s;
    filter: none;
    opacity: 0.88;
  }

  .player-shell,
  .profile-modal-card {
    backdrop-filter: none;
  }

  .profile-card,
  .profile-avatar,
  .profile-meta {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .typing-last {
    max-width: 100%;
    border-right: none;
  }

  .output-line {
    opacity: 1;
    transform: none;
  }

  .home-btn,
  button,
  .profile-telegram-btn,
  .profile-modal-telegram-btn,
  .profile-card,
  .profile-avatar,
  .profile-meta {
    transform: none !important;
  }
}

/* Validation Styles */
.form-group-bin input.error {
    border-color: #ff4d4d;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.18);
}

.error-message {
    color: #ff4d4d;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    font-weight: 600;
    display: none; /* Hidden by default */
}

.form-group-bin.has-error .error-message {
    display: block;
}