.s4j { position:fixed; top:clamp(12px,var(--s4j-offset,45vh),calc(100dvh - var(--s4j-tab-height,240px) - 12px)); z-index:900; width:max-content; max-width:64px; margin:0; padding:0; font:inherit; color:var(--s4j-ink,#14283d); }
.s4j, .s4j * { box-sizing:border-box; }
.s4j[data-side="left"] { left:0; }
.s4j[data-side="right"] { right:0; }
.s4j .s4j-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-width:48px; min-height:48px; max-height:65dvh; width:48px; padding:16px 10px; border:1px solid rgba(255,255,255,.35); border-radius:0 10px 10px 0; background:var(--s4j-button,rgba(21,85,140,.95)); color:var(--s4j-label,#fff); font:inherit; font-weight:700; line-height:1.2; text-decoration:none; cursor:pointer; list-style:none; box-shadow:0 2px 12px rgba(0,0,0,.18); }
.s4j[data-side="right"] .s4j-tab { border-radius:10px 0 0 10px; }
.s4j .s4j-tab::-webkit-details-marker { display:none; }
.s4j .s4j-tab::marker { content:""; }
.s4j .s4j-tab:hover { color:var(--s4j-label,#fff); text-decoration:none; filter:brightness(1.12); }
.s4j .s4j-label { writing-mode:vertical-rl; transform:rotate(180deg); max-height:48dvh; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:0; }
.s4j .s4j-icon { display:block; flex:none; width:24px; height:24px; max-width:100%; object-fit:contain; }
.s4j .s4j-panel { position:fixed; top:var(--s4j-panel-top,12px); width:min(380px,calc(100vw - var(--s4j-tab-width,48px) - 22px)); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; padding:24px; border:1px solid rgba(20,40,61,.2); border-radius:12px; background:var(--s4j-panel,#fff); color:var(--s4j-ink,#14283d); box-shadow:0 10px 40px rgba(0,0,0,.24); overflow-wrap:anywhere; }
.s4j[data-side="left"] .s4j-panel { left:calc(var(--s4j-tab-width,48px) + 10px); }
.s4j[data-side="right"] .s4j-panel { right:calc(var(--s4j-tab-width,48px) + 10px); }
details.s4j:not([open]) .s4j-panel { display:none; }
.s4j .s4j-panel h2 { color:inherit; font:inherit; font-size:1.35rem; font-weight:750; line-height:1.25; margin:0 44px 16px 0; }
.s4j .s4j-panel p { color:inherit; font:inherit; line-height:1.55; margin:0 0 16px; white-space:normal; }
.s4j .s4j-close { position:absolute; top:8px; right:8px; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; font:inherit; font-size:1.75rem; line-height:1; cursor:pointer; }
.s4j .s4j-close[hidden] { display:none; }
.s4j .s4j-close:hover { background:rgba(127,127,127,.16); }
.s4j .s4j-link { display:inline-flex; align-items:center; min-height:44px; max-width:100%; padding:10px 16px; border:1px solid currentColor; border-radius:6px; color:inherit; background:transparent; font:inherit; font-weight:700; line-height:1.4; text-decoration:none; }
.s4j .s4j-link:hover { color:inherit; text-decoration:underline; }
.s4j :is(a,button,summary):focus-visible { outline:3px solid #e7a817; outline-offset:3px; }
@media(max-width:640px) {
  .s4j .s4j-tab { width:44px; min-width:44px; gap:8px; padding:12px 8px; }
  .s4j .s4j-label { max-height:35dvh; font-size:.9rem; }
  .s4j .s4j-icon { width:22px; height:22px; }
  .s4j .s4j-panel { padding:20px 16px; }
}