#ac-blue-horizon .ac-screen { --night: #071425; --surface: #10223c; --ink: #f7faff; --sub: #bdcde4; --line: #2b4160; --blue: #3d8bff; --onblue: #041833; display: flex; flex-direction: column; position: relative; isolation: isolate; width: min(100%, 370px); margin: auto; min-height: 500px; border-radius: 25px; border: 1px solid var(--line); box-shadow: 0 14px 38px #020d272a; overflow: hidden; color: var(--ink); background: var(--night); font: 14px/1.35 system-ui, sans-serif; }
    #ac-blue-horizon *, #ac-blue-horizon *::before, #ac-blue-horizon *::after { box-sizing: border-box; }
    #ac-blue-horizon [hidden] { display: none !important; }
    #ac-blue-horizon .ac-screen button { cursor: inherit; }
    #ac-blue-horizon .ac-header { position: relative; min-height: 122px; display: grid; place-items: center; padding: 44px 24px 20px; background: linear-gradient(138deg,#0e366d,#101d38 72%); }
    #ac-blue-horizon .ac-logo { display: block; width: 136px; height: 53px; object-fit: contain; filter: brightness(0) invert(1); }
    #ac-blue-horizon .ac-language { display: flex; position: absolute; top: max(2px, calc(env(safe-area-inset-top) - 7px)); right: max(0px, calc(env(safe-area-inset-right) - 15px)); isolation: isolate; }
    #ac-blue-horizon .ac-language::before { content: ""; position: absolute; inset: 7px 15.5px; z-index: -1; border: 1px solid #9ebcef44; border-radius: 9px; background: #06152f; }
    #ac-blue-horizon .ac-lang { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #d3e2fa; font-size: 10px; font-weight: 650; }
    #ac-blue-horizon .ac-lang span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; }
    #ac-blue-horizon .ac-lang:first-child span { transform: translateX(8px); }
    #ac-blue-horizon .ac-lang:last-child span { transform: translateX(-8px); }
    #ac-blue-horizon .ac-lang[aria-pressed=true] span { background: #eaf3ff; color: #132b4b; }
    #ac-blue-horizon .ac-identity { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 17px 22px 16px; }
    #ac-blue-horizon .ac-portrait { display: block; width: 57px; height: 57px; flex: 0 0 57px; border-radius: 50%; overflow: hidden; border: 2px solid #83b3fa; }
    #ac-blue-horizon .ac-portrait-image { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateY(11%) scale(1.45); }
    #ac-blue-horizon .ac-name { margin: 0; color: var(--ink); font-size: clamp(24px, 7cqi, 32px); line-height: 1.07; font-weight: 700; letter-spacing: -.035em; }
    #ac-blue-horizon .ac-role { margin: 6px 0 0; color: var(--sub); font-size: 13px; line-height: 1.35; }
    #ac-blue-horizon .ac-company { margin: 4px 0 0; color: #9cc7ff; font-size: 12px; font-weight: 650; }
    #ac-blue-horizon .ac-actions { margin: auto 0 0; padding: 0 22px 20px; display: flex; flex-direction: column; gap: 8px; }
    #ac-blue-horizon .ac-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
    #ac-blue-horizon .ac-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 650; text-align: center; }
    #ac-blue-horizon .ac-btn:hover { border-color: #93bffa; }
    #ac-blue-horizon .ac-btn svg, #ac-blue-horizon .ac-btn i { flex: 0 0 17px; width: 17px; height: 17px; }
    #ac-blue-horizon .ac-save { min-height: 48px; color: var(--onblue); background: var(--blue); border-color: transparent; font-size: 14px; }
    #ac-blue-horizon .ac-meta { font-size: 11px; color: #a9bed8; text-align: center; margin: 0; }
    #ac-blue-horizon .ac-horizon .ac-public { --horizon-rise: 7px; --portrait-size: 133.59375px; }
    #ac-blue-horizon .ac-horizon .ac-header { min-height: 200px; padding: 0 24px var(--horizon-rise); overflow: clip; background: linear-gradient(180deg,#101c36 18%,#1d487a 77%,#5494ce 100%); }
    #ac-blue-horizon .ac-horizon .ac-header > .ac-logo { width: 210px; height: 83px; transform: translateY(-11px); }
    #ac-blue-horizon .ac-horizon .ac-header::after { content: ""; position: absolute; width: 132%; left: -16%; height: 36px; bottom: calc(var(--horizon-rise) - 36px); border-radius: 50% 50% 0 0; background: var(--night); }
    #ac-blue-horizon .ac-horizon .ac-identity { align-items: center; text-align: center; padding-top: 0; gap: 16px; }
    #ac-blue-horizon .ac-horizon .ac-portrait { width: var(--portrait-size); height: var(--portrait-size); flex-basis: var(--portrait-size); margin-top: calc(var(--portrait-size) / -2 - var(--horizon-rise)); }
    #ac-blue-horizon .ac-horizon .ac-name { font-size: clamp(30px, 8.5vw, 38px); }
    #ac-blue-horizon .ac-horizon .ac-role { font-size: 15px; }
    #ac-blue-horizon .ac-horizon .ac-company { font-size: 14px; }
    #ac-blue-horizon .ac-horizon .ac-save { font-size: 16px; }
    #ac-blue-horizon .ac-linkedin-mark { display: grid; place-items: center; width: 17px; height: 17px; border: 1.5px solid currentColor; border-radius: 3px; color: #fff; background: transparent; font: 650 11px/1 system-ui,sans-serif; letter-spacing: -.035em; }
    #ac-blue-horizon .ac-horizon .ac-actions { margin: auto 10px 10px; padding: 10px; background: #102640; border-radius: 15px; }
    #ac-blue-horizon .ac-horizon .ac-links { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; }
    #ac-blue-horizon .ac-horizon .ac-links .ac-btn { border: 0; background: transparent; flex-direction: column; font-size: 12px; padding: 4px 0; gap: 4px; }
    @media (max-width: 390px) {
      #ac-blue-horizon .ac-screen { border-radius: 19px; }
      #ac-blue-horizon .ac-name { font-size: 25px; }
      #ac-blue-horizon .ac-identity, #ac-blue-horizon .ac-actions { padding-inline: 14px; }
    }
  
    html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; }
    body { display: grid; place-items: center; box-sizing: border-box; background: #061223; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
    #ac-blue-horizon { max-width: 370px; width: min(370px, 100%); transform-origin: center; }
    #ac-blue-horizon .ac-screen { width: 100%; }
    #ac-blue-horizon .ac-public { flex: 1; display: flex; flex-direction: column; }
    #ac-blue-horizon .ac-btn { text-decoration: none; }
    #ac-blue-horizon .ac-btn svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    #ac-blue-horizon .note { margin: 2px 0 0; font-size: 12px; color: var(--sub); text-align: center; }
    #ac-blue-horizon :focus-visible { outline: 2px solid #b9dcff; outline-offset: 2px; }

    @media (max-width: 600px) {
      body {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        padding: 0;
        background: #071425;
      }
      #ac-blue-horizon {
        display: flex;
        width: 100%;
        max-width: none;
        min-height: 100%;
        transform-origin: top center;
      }
      #ac-blue-horizon .ac-screen {
        flex: 1;
        margin: 0;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }
      #ac-blue-horizon .ac-horizon .ac-header {
        --horizon-drop: 24px;
        min-height: calc(clamp(148px, 31dvh, 246px) + var(--horizon-drop));
        padding-top: env(safe-area-inset-top);
        padding-bottom: calc(var(--horizon-rise) + var(--horizon-drop));
      }
      #ac-blue-horizon .ac-horizon .ac-actions {
        margin-bottom: max(12px, env(safe-area-inset-bottom));
        margin-left: max(12px, env(safe-area-inset-left));
        margin-right: max(12px, env(safe-area-inset-right));
      }
    }

    @media (max-width: 600px) and (max-height: 520px) {
      #ac-blue-horizon .ac-horizon .ac-header {
        --horizon-drop: 12px;
        min-height: calc(188px + var(--horizon-drop));
      }
      #ac-blue-horizon .ac-horizon .ac-identity { gap: 12px; padding-bottom: 12px; }
    }
    @media (max-width: 360px) {
      #ac-blue-horizon .ac-horizon .ac-header > .ac-logo { width: 168px; height: auto; }
    }
    @media (max-width: 380px) and (max-height: 520px) {
      #ac-blue-horizon .ac-horizon .ac-header > .ac-logo { transform: translateY(1px); }
    }