#formats.studio-formats{width:100%;max-width:none;margin:16px 0;padding:30px 0;border:0;border-radius:0;background:radial-gradient(ellipse at 80% 25%,#43587266,transparent 65%),#293349;color:#f1f5fc}
#formats .section-head{margin-bottom:24px}
#formats h2{color:#f1f5fc}
.formats-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:stretch}
#formats .formats-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;min-width:0}
#formats .formats-grid article{padding:18px 20px;border:1px solid #ffffff26;border-radius:16px;background:linear-gradient(120deg,#ffffff14,#ffffff08);box-shadow:inset 0 1px 0 #ffffff30;transition:background .2s,border-color .2s}
#formats .formats-grid article.is-active{border-color:#afd0f37a;background:linear-gradient(120deg,#ffffff23,#ffffff0e)}
#formats .formats-grid h3{font-size:20px;line-height:1.25;margin:0 0 10px}
.format-select{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;background:none;padding:0;color:#f3f7fd;font:inherit;text-align:left;cursor:pointer}
.format-select>span:last-child{color:#a5c6eb;font-size:18px}
.format-select:focus-visible{outline:2px solid #a5c6eb;outline-offset:5px;border-radius:3px}
#formats .formats-grid p{font-size:13px;line-height:1.6;color:#d8e2ef;margin:0 0 12px}
#formats .format-detail{display:block;margin:0;border:0;padding:0;font-size:12px;line-height:1.55;color:#becfe1}
#formats .format-detail b{display:none}
#formats .format-detail span{color:#becfe1}
#formats .formats-grid a{font-size:12px;margin-top:10px;color:#b6d8ff}
#formats .formats-grid a:hover{color:white}
.format-editor{min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #b9cce52e;border-radius:18px;background:linear-gradient(140deg,#172235b8,#1e263c85);box-shadow:inset 0 1px 0 #ffffff18,0 12px 32px #121b2a22}
.format-editor-bar,.format-editor-footer{display:flex;align-items:center;gap:12px;padding:15px 18px;color:#a9bbd1;font:12px/1.5 Consolas,monospace}
.format-editor-bar{border-bottom:1px solid #afc7e51a;background:#ffffff04}
.editor-language{margin-left:auto;font-size:10px;color:#c8b7e8}
.editor-dots{display:flex;gap:5px}.editor-dots i{width:7px;height:7px;border-radius:50%;background:#9ab9de}.editor-dots i:nth-child(2){background:#c1a6e0}.editor-dots i:nth-child(3){background:#9fcdbb}
.format-editor-content{flex:1;padding:24px 20px;min-height:400px;overflow:hidden}
.terminal-code{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.9 Consolas,'Courier New',monospace;color:#c6d3e4;tab-size:4}
.terminal-code:after{content:'▋';color:#a3d6ca;animation:terminal-caret 1.1s steps(1) infinite}
.terminal-code .php-keyword{color:#d3b6f4}.terminal-code .php-variable{color:#9acbff}.terminal-code .php-type{color:#ead19b}.terminal-code .php-method{color:#9edbc8}.terminal-code .php-number{color:#c3df9d}.terminal-code .php-punctuation{color:#b4c2d8}.terminal-code .php-string{color:#c4dcaa}.terminal-code .php-comment{color:#7f94ad}
.format-editor-footer{justify-content:space-between;border-top:1px solid #afc7e51a;font-size:11px}.editor-caption{font-family:inherit}
@keyframes terminal-caret{50%{opacity:0}}
@media(max-width:1000px){.formats-workspace{gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.terminal-code{font-size:12px}.format-editor-content{padding:20px 16px}}
@media(max-width:700px){#formats.studio-formats{margin:12px 0;padding:24px 0}.formats-workspace{grid-template-columns:minmax(0,1fr);gap:18px}#formats .formats-grid article{padding:18px}.format-editor-content{min-height:360px}.terminal-code{font-size:12px}.format-editor-bar,.format-editor-footer{padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.terminal-code:after{animation:none}#formats .formats-grid article{transition:none}}
/* The terminal keeps its dimensions while new lines scroll internally. */
.format-editor{height:560px;min-height:0;align-self:start;width:100%;box-sizing:border-box}
.format-editor-bar,.format-editor-footer{flex-shrink:0}
.format-editor-content{min-height:0;min-width:0;overflow:hidden;flex:1}
.terminal-code{white-space:pre;overflow-wrap:normal;width:max-content;min-width:100%}
@media(max-width:700px){.format-editor{height:420px}.format-editor-content{min-height:0}}