.code-output{background:#1e1e1e;border:1px solid #304f78;border-radius:8px;margin:20px 0;overflow:hidden;box-shadow:0 4px 6px #0000004d}.code-header{background:#48658b4d;padding:8px 15px;border-bottom:1px solid #304f78;display:flex;justify-content:space-between;align-items:center}.code-language-badge{color:#6afcff;font-weight:700;font-size:.9em;text-transform:uppercase}.code-variation-label{font-size:.85em;color:#ffffffb3;margin-left:10px}.code-copy-btn{background:#6afcff1a;border:1px solid #6afcff;color:#6afcff;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.85em;transition:all .2s}.code-copy-btn:hover{background:#6afcff33;border-color:#8cfdff}.code-copy-btn.copied{background:#4caf504d;border-color:#4caf50;color:#4caf50}.code-content{padding:15px;overflow-x:auto;font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.6;color:#d4d4d4}.code-content pre{margin:0;padding:0;background:transparent;border:none}.code-content code{font-family:inherit;background:transparent;padding:0;color:inherit}.code-content code[class*=language-]{display:block;font-family:Consolas,Monaco,Courier New,monospace;color:#d4d4d4}.keyword{color:#569cd6;font-weight:700}.string{color:#ce9178}.number{color:#b5cea8}.comment{color:#6a9955;font-style:italic}.function{color:#dcdcaa}.class-name{color:#4ec9b0}.variable{color:#9cdcfe}.operator,.punctuation{color:#d4d4d4}.type{color:#4ec9b0}.constant{color:#4fc1ff}.decorator{color:#c586c0}.property{color:#9cdcfe}.tag{color:#569cd6}.attr-name{color:#9cdcfe}.attr-value{color:#ce9178}.regex{color:#d16969}.escape{color:#d7ba7d}.boolean,.null{color:#569cd6}.code-line-numbers{display:flex}.line-number{color:#858585;padding-right:15px;user-select:none;text-align:right;min-width:40px}.line-content{flex:1}.code-content::-webkit-scrollbar{height:8px;background:#48658b33}.code-content::-webkit-scrollbar-thumb{background:#48658b80;border-radius:4px}.code-content::-webkit-scrollbar-thumb:hover{background:#48658bb3}.code-footer{background:#48658b33;padding:8px 15px;border-top:1px solid #304f78;font-size:.85em;color:#999}@media(max-width:768px){.code-content{font-size:12px;padding:10px}.code-header{padding:6px 10px}.code-copy-btn{font-size:.8em;padding:3px 8px}}.code-error{background:#ff00001a;border-bottom:2px wavy #ff0000}.code-warning{background:#ffa5001a;border-bottom:2px wavy #ffa500}.code-content ::selection{background:#6afcff4d}.code-content ::-moz-selection{background:#6afcff4d}.code-loading{text-align:center;padding:40px;color:#6afcff}.code-loading:after{content:"...";animation:loading 1.5s infinite}@keyframes loading{0%,20%{content:"."}40%{content:".."}60%,to{content:"..."}}