/* Code Playground — dark IDE frame: files, highlighted editor, sandboxed preview and console. */
.pg-hero{background:radial-gradient(circle at 92% 18%,#4fd1ff33,transparent 38%),linear-gradient(120deg,#13253a,#211d38 75%)}
.pg-frame{border:1px solid var(--usp-line,#3a3352);border-radius:16px;background:#16131f;margin-top:14px;overflow:hidden;display:flex;flex-direction:column;--mono:ui-monospace,'Cascadia Code','JetBrains Mono',Consolas,'Courier New',monospace}
.pg-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;background:#221d33;border-bottom:1px solid #352f4a}
.pg-group{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.pg-right{margin-left:auto}
.pg .pg-btn{min-height:32px;padding:4px 11px;font-size:.84rem;border-radius:8px;background:#16131f;border:1px solid #352f4a;color:#e9e3f7;display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.pg .pg-btn.small{min-height:26px;padding:1px 8px;font-size:.78rem}
.pg .pg-run{background:#2fbf71;color:#06210f;border-color:transparent;font-weight:700}.pg .pg-btn.usp-primary{background:#4fd1ff;color:#06202a;border-color:transparent;font-weight:700}
.pg .pg-btn[aria-pressed=true]{background:#4b3d8f;border-color:#8f7bff}
.pg-chk{font-size:.82rem;color:#d9d3ea;display:flex;gap:5px;align-items:center}
.pg .pg-top select,.pg .pg-pbar select{height:32px;min-height:0;padding:2px 8px;font-size:.84rem;border-radius:8px;background:#16131f;color:#e9e3f7;border:1px solid #352f4a}
.pg-seg{display:flex;border:1px solid #352f4a;border-radius:8px;overflow:hidden}.pg .pg-seg button{min-height:30px;padding:2px 10px;background:#16131f;border:0;color:#e9e3f7;font-size:.9rem;border-radius:0}.pg .pg-seg button[aria-pressed=true]{background:#4b3d8f}
.pg-body{display:grid;height:min(74vh,760px);min-height:440px}
.pg-body.layout-split{grid-template-columns:170px minmax(0,1fr) minmax(0,1fr)}
.pg-body.layout-stack{grid-template-columns:170px minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.pg-body.layout-stack .pg-previewcol{grid-column:2;border-left:0;border-top:1px solid #352f4a}.pg-body.layout-stack .pg-files{grid-row:1/3}
.pg-body.layout-code{grid-template-columns:170px minmax(0,1fr)}.pg-body.layout-code .pg-previewcol{display:none}
.pg-body.layout-preview{grid-template-columns:minmax(0,1fr)}.pg-body.layout-preview .pg-files,.pg-body.layout-preview .pg-editor{display:none}
.pg-files{background:#1b1727;border-right:1px solid #352f4a;overflow:auto;min-height:0}
.pg-files-head{padding:8px 10px;font-size:.74rem;color:#9d93b8;text-transform:uppercase;letter-spacing:.06em}
.pg-filelist{list-style:none;margin:0;padding:0 4px 8px}
.pg-filelist li{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:6px;font:13px var(--mono);color:#d9d3ea;cursor:pointer;white-space:nowrap;overflow:hidden}
.pg-filelist li:hover{background:#262038}.pg-filelist li.on{background:#352b55;color:#fff}.pg-filelist li .nm{overflow:hidden;text-overflow:ellipsis;flex:1}
.pg-filelist li .entry{font-size:10px;color:#2fbf71}.pg .pg-filelist li button{min-height:0;height:20px;width:20px;padding:0;border:0;background:none;color:#9d93b8;opacity:0;font-size:12px}
.pg-filelist li:hover button,.pg-filelist li.on button{opacity:1}.pg-filelist .ico{width:16px;text-align:center;font-size:11px}
.pg-editor{display:flex;flex-direction:column;min-width:0;min-height:0;background:#1e1a2b}
.pg-tabs{display:flex;overflow-x:auto;background:#1b1727;border-bottom:1px solid #352f4a;scrollbar-width:thin;flex:0 0 auto}
.pg .pg-tabs button{min-height:32px;padding:4px 10px;border:0;border-right:1px solid #352f4a;border-radius:0;background:#1b1727;color:#9d93b8;font:12px var(--mono);white-space:nowrap;display:flex;gap:6px;align-items:center}
.pg .pg-tabs button[aria-selected=true]{background:#1e1a2b;color:#fff;box-shadow:inset 0 2px 0 #8f7bff}.pg-tabs .x{opacity:.6;padding:0 2px}.pg-tabs .x:hover{opacity:1}
.pg-code{position:relative;flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);min-height:0;overflow:hidden;font:13.5px/1.55 var(--mono);tab-size:2}
.pg-gutter{padding:10px 8px 40px 10px;text-align:right;color:#5d5578;user-select:none;overflow:hidden;white-space:pre;background:#1b1727;min-width:38px}
.pg-gutter .cur{color:#d9d3ea}
.pg-scroll{position:relative;overflow:auto;min-height:0}
.pg-hl,#pgTa{margin:0;padding:10px 14px 40vh 12px;font:inherit;white-space:pre;tab-size:2;min-width:100%;box-sizing:border-box;line-height:inherit;letter-spacing:0;word-spacing:0}
.pg-hl{position:absolute;top:0;left:0;color:#e6e1f5;pointer-events:none;width:max-content;min-height:100%}
.pg #pgTa{position:relative;display:block;width:100%;height:100%;min-height:100%;border:0;outline:none;resize:none;background:transparent;color:transparent;caret-color:#fff;overflow:hidden;border-radius:0;box-shadow:none}
#pgTa::selection{background:#5a4bb366;color:transparent}
.tk-k{color:#c792ea}.tk-s{color:#c3e88d}.tk-c{color:#6a6385;font-style:italic}.tk-n{color:#f78c6c}.tk-f{color:#82aaff}.tk-p{color:#ffcb6b}.tk-t{color:#89ddff}.tk-r{color:#f07178}
.pg-asset{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#d9d3ea;padding:20px;overflow:auto}.pg-asset img{max-width:100%;max-height:60vh;background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/16px 16px}
.pg-statusbar{display:flex;gap:16px;padding:3px 10px;font:11.5px var(--mono);color:#9d93b8;background:#1b1727;border-top:1px solid #352f4a;flex:0 0 auto}
.pg-previewcol{display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid #352f4a;background:#fff}
.pg-pbar{display:flex;gap:6px;align-items:center;padding:5px 8px;background:#221d33;border-bottom:1px solid #352f4a;flex:0 0 auto}.pg .pg-pbar select{height:28px}
.pg-pwrap{flex:1;min-height:0;overflow:auto;background:#e9e7f0;display:flex;justify-content:center}
#pgFrameView{border:0;width:100%;height:100%;background:#fff;display:block}
.pg-pwrap.device #pgFrameView{box-shadow:0 0 0 1px #c8c4d8,0 6px 20px #0002;flex:0 0 auto}
.pg-console{flex:0 0 32%;min-height:110px;display:flex;flex-direction:column;background:#16131f;border-top:1px solid #352f4a}
.pg-chead{display:flex;gap:8px;align-items:center;padding:4px 8px;font-size:.78rem;color:#9d93b8;border-bottom:1px solid #2a2440}.pg-chead b{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}.pg-chead .pg-btn{margin-left:auto}
.pg-errcount{color:#ff6b81;font-weight:700}
.pg-clog{flex:1;overflow:auto;font:12.5px/1.45 var(--mono);padding:4px 0}
.pg-clog div{padding:3px 10px;border-bottom:1px solid #221d30;white-space:pre-wrap;word-break:break-word;color:#e6e1f5}
.pg-clog .warn{background:#3a3110;color:#ffe08a}.pg-clog .error{background:#3a1520;color:#ffb3c1}.pg-clog .info{color:#89ddff}.pg-clog .result{color:#c3e88d}.pg-clog .input{color:#9d93b8}.pg-clog .sys{color:#7c739a;font-style:italic}
.pg-cin{display:flex;align-items:center;gap:6px;padding:3px 8px;border-top:1px solid #2a2440;color:#8f7bff;font:13px var(--mono)}.pg .pg-cin input{flex:1;min-height:0;height:26px;padding:2px 4px;border:0;background:transparent;color:#fff;font:inherit;box-shadow:none}
.pg-frame .usp-status:empty{display:none}.pg-frame .usp-status{margin:0}
.pg-frame:fullscreen,.pg-frame.pg-full{position:fixed;inset:0;z-index:1000;margin:0;border:0;border-radius:0}
.pg-frame:fullscreen .pg-body,.pg-frame.pg-full .pg-body{flex:1;height:auto}
@media(max-width:900px){.pg-body.layout-split,.pg-body.layout-stack{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(320px,50vh) minmax(320px,55vh);height:auto}.pg-files{border-right:0;border-bottom:1px solid #352f4a;max-height:120px}.pg-body .pg-previewcol{grid-column:auto;border-left:0;border-top:1px solid #352f4a}.pg-body.layout-code{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(380px,65vh);height:auto}.pg-right{margin-left:0}.pg-code{font-size:13px}}
.pg-code,.pg-hl,#pgTa{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
@media(max-width:900px){.pg-frame:fullscreen,.pg-frame.pg-full{overflow-y:auto;-webkit-overflow-scrolling:touch;display:block}.pg-frame:fullscreen .pg-body,.pg-frame.pg-full .pg-body{flex:none;height:auto;min-height:0}}