.javascript-code-shell { position:relative; height:clamp(320px,55vh,700px); min-width:0; border:1px solid #cbd5e1; border-radius:10px; overflow:hidden; background:#f8fafc; --js-line:24px; }
.javascript-code-shell pre,.javascript-source-editor { box-sizing:border-box; margin:0; font:14px/24px Consolas,"Cascadia Code",Monaco,monospace; tab-size:2; letter-spacing:normal; white-space:pre; }
.javascript-source-editor { position:absolute; inset:0 0 0 54px; width:calc(100% - 54px); height:100%; padding:14px; border:0; outline:0; resize:none; background:transparent; color:transparent; caret-color:#111827; -webkit-text-fill-color:transparent; overflow:auto; }
.javascript-source-editor::selection { background:#bfdbfe88; }
.javascript-code-clip { position:absolute; inset:0 0 0 54px; overflow:hidden; pointer-events:none; }
.javascript-highlight { padding:14px; color:#0f172a; min-width:max-content; min-height:100%; background-image:linear-gradient(#dbeafe70,#dbeafe70); background-size:100% 24px; background-position:0 calc(14px + var(--js-active-line,0) * 24px); background-repeat:no-repeat; }
.javascript-gutter-clip { position:absolute; inset:0 auto 0 0; width:54px; overflow:hidden; background:#e2e8f0; border-right:1px solid #cbd5e1; }
.javascript-gutter { padding:14px 10px; text-align:right; color:#64748b; }
.js-token-keyword { color:#7c3aed; font-weight:600; } .js-token-string { color:#15803d; } .js-token-comment { color:#64748b; font-style:italic; } .js-token-number,.js-token-literal { color:#c2410c; } .js-token-bracket { color:#0369a1; font-weight:600; }
.javascript-editor-status { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:8px 12px; color:var(--muted,#64748b); font:12px Consolas,monospace; }
#javascriptSourceWorkspace .html-source-editor-head { flex-wrap:wrap; }
#javascriptSourceWorkspace .html-source-editor-actions { flex-wrap:wrap; flex-shrink:1; }
#javascriptSourceWorkspace [data-js-status] { padding:0 14px 12px; overflow-wrap:anywhere; }
#javascriptSourceWorkspace .javascript-syntax-status { display:block; max-width:calc(100% - 24px); margin:0 12px 8px; border:0; padding:4px 0; background:none; color:#15803d; text-align:start; overflow-wrap:anywhere; }
#javascriptSourceWorkspace.has-syntax-error .javascript-syntax-status { color:#b91c1c; }
.has-syntax-error .javascript-highlight { background-image:linear-gradient(#fecaca88,#fecaca88); background-position:0 calc(14px + var(--js-error-line,0) * 24px); }
.document-javascript-controls { display:flex; gap:8px; padding:0 0 12px; }
.document-javascript-controls button,#javascriptSourceWorkspace button { border:1px solid #93c5fd; background:#eff6ff; color:#1e40af; border-radius:8px; padding:8px 12px; cursor:pointer; }
.document-javascript-controls button:disabled,#javascriptSourceWorkspace button:disabled { opacity:.45; cursor:default; }
.document-javascript-preview { display:block; width:100%; border:0; background:#fff; min-height:180px; }
#javascriptSourceWorkspace[hidden] { display:none!important; }
@media screen { .document-workspace.has-javascript-document:not(.is-html-source-view) .preview-source-paper { display:block!important; } .document-workspace.has-javascript-document .preview-viewport { display:none!important; } .has-javascript-document #paperContent { display:none!important; } }
html[data-theme="dark"] .javascript-code-shell { background:#0f172a; border-color:#475569; } html[data-theme="dark"] .javascript-highlight { color:#e2e8f0; background-image:linear-gradient(#1e293b,#1e293b); } html[data-theme="dark"] .javascript-source-editor { caret-color:#e2e8f0; } html[data-theme="dark"] .javascript-gutter-clip { background:#1e293b; border-color:#475569; } html[data-theme="dark"] .js-token-keyword { color:#c4b5fd; } html[data-theme="dark"] .js-token-string { color:#86efac; } html[data-theme="dark"] .js-token-number,html[data-theme="dark"] .js-token-literal { color:#fdba74; } html[data-theme="dark"] .js-token-bracket { color:#7dd3fc; }
@media (max-width:600px) { .javascript-code-shell { height:55vh; } .javascript-source-editor { font-size:16px; } .javascript-highlight,.javascript-gutter { font-size:16px!important; } }
html[data-theme="dark"] .has-syntax-error .javascript-highlight { background-image:linear-gradient(#7f1d1d88,#7f1d1d88); background-position:0 calc(14px + var(--js-error-line,0) * 24px); }
@media print { .document-javascript-preview,.document-javascript-controls,#javascriptSourceWorkspace { display:none!important; } }