
/* J3Script official syntax theme -- shared by live editor, hero and documentation */
:root{--j3-keyword:#60A5FA;--j3-type:#C4A0FF;--j3-string:#57D3A2;--j3-comment:#75869E;--j3-identifier:#E4EBF5;--j3-action:#31C7ED}
.j3-syntax{color:var(--j3-identifier);font-variant-ligatures:none}
.j3-token-keyword{color:var(--j3-keyword);font-weight:700}
.j3-token-type{color:var(--j3-type)}
.j3-token-string{color:var(--j3-string)}
.j3-token-comment{color:var(--j3-comment)}
.j3-token-action{color:var(--j3-action);font-weight:700}
.code-surface{position:relative;flex:1;min-width:0;min-height:0;isolation:isolate;overflow:hidden;background:#081525}
.code-surface:focus-within{background:#0a182b}
.code-surface textarea,.code-surface .syntax-mirror{
 position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;
 padding:17px 16px;font:400 12px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 letter-spacing:normal;tab-size:4;white-space:pre;word-break:normal;overflow:auto;
}
.code-surface .syntax-mirror{z-index:0;pointer-events:none;overflow:hidden;scrollbar-width:none;white-space:pre;background:transparent}
.code-surface .syntax-mirror code{display:block;min-height:100%;width:max-content;min-width:100%;white-space:pre;font:inherit;color:var(--j3-identifier)}
.code-surface textarea{z-index:1;background:transparent;resize:none;color:#dbe9ff;outline:none}
.code-surface textarea:focus{background:transparent}
.code-surface.j3-live-color textarea{color:transparent;-webkit-text-fill-color:transparent;caret-color:#eaf5ff}
.code-surface.j3-live-color textarea::selection{background:rgba(71,144,255,.33);-webkit-text-fill-color:transparent}
.code-surface textarea::placeholder{-webkit-text-fill-color:#7389a7}
.j3-suggest{position:absolute;z-index:5;max-height:215px;width:min(295px,calc(100% - 16px));overflow:auto;
 border:1px solid #40628d;background:#10243b;box-shadow:0 12px 38px #0009;border-radius:9px;padding:4px}
.j3-suggest[hidden]{display:none}
.j3-completion{display:flex;width:100%;align-items:flex-start;flex-direction:column;gap:1px;border:0;background:transparent;color:#cbdaf1;text-align:left;padding:7px 9px;border-radius:5px}
.j3-completion strong{color:var(--j3-keyword);font-family:ui-monospace,monospace;font-size:12px}
.j3-completion small{color:#97acc6;font-size:10px}
.j3-completion:hover,.j3-completion.active{background:#1b4164}
.editor-bottom .assist-hint{margin-left:auto;color:#81b2df}
.hero-preview pre .j3-token-keyword{color:var(--j3-keyword)}
@media(max-width:600px){.code-surface textarea,.code-surface .syntax-mirror{font-size:16px;line-height:1.75}}

/* Highlighted source examples in the light handbook use the same dark editor theme. */
pre.j3-code-block{background:#0b1729!important;color:#E4EBF5!important;border-left-color:#60A5FA!important}
pre.j3-code-block code.j3-syntax{background:transparent!important;color:var(--j3-identifier)!important;padding:0!important}
@media(max-width:600px){.editor-bottom .assist-hint{display:none}.editor .line-numbers{line-height:28px}}

.assist-ready{font-size:9px;color:#79c4ff;font-weight:750;letter-spacing:.5px;white-space:nowrap}
@media(max-width:600px){.assist-ready{font-size:8px;letter-spacing:0}}
