/* Playground layout: code on the left, live preview on the right */
.pg-body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.pg-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:12px clamp(16px,2.4vw,28px);border-bottom:1px solid var(--rule);background:var(--paper)}
.pg-left{display:flex;align-items:baseline;gap:20px}
.pg-back{color:var(--ink-2)}
.pg-title{display:flex;align-items:baseline;gap:14px;min-width:0;flex:1 1 280px}
.pg-title h1{margin:0;font-size:20px;font-weight:500;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-tags{color:var(--ink-3)}
.pg-edited{color:var(--accent)}
.pg-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pg-btn{border:1px solid var(--rule);background:transparent;padding:10px 14px;min-height:40px;cursor:pointer}
.pg-btn:hover{border-color:var(--ink)}
.pg-btn:focus-visible,.pg-tab:focus-visible,.pg-icon:focus-visible,.pg-split:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pg-main{--split:46%;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:var(--split) 8px minmax(0,1fr)}
.pg-code{min-width:0;min-height:0;display:flex;flex-direction:column;background:#141312;color:#EEEBE5}
.pg-tabs{display:flex;align-items:stretch;border-bottom:1px solid #2C2A27;background:#0F0E0D}
.pg-tab{background:transparent;border:0;border-right:1px solid #2C2A27;color:#8F8A81;padding:12px 18px;cursor:pointer;position:relative}
.pg-tab[aria-selected="true"]{color:#F5F3EF;background:#141312}
.pg-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#FF48B0}
.pg-hint{margin-left:auto;align-self:center;padding:0 16px;color:#6F6B64;font-size:11px}
.pg-editors{flex:1 1 auto;min-height:0;position:relative}
.pg-editor{position:absolute;inset:0}
.pg-editor[hidden]{display:none}
.pg-split{background:var(--rule);cursor:col-resize;touch-action:none}
.pg-split:hover{background:var(--ink-3)}
.pg-view{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--panel)}
.pg-viewbar{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 6px 16px;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.pg-viewbtns{display:flex;gap:4px}
.pg-icon{all:unset;cursor:pointer;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.pg-icon:hover{background:var(--paper)}
.pg-frame{flex:1 1 auto;min-height:0;position:relative;background:#fff}
.pg-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pg-frame:fullscreen iframe{position:static}
.pg-console{min-height:0;max-height:96px;overflow:auto;font-size:11px;letter-spacing:0.02em;text-transform:none;border-top:1px solid var(--rule);padding:0 16px;color:var(--ink-2)}
.pg-console:empty{display:none}
.pg-console div{padding:6px 0;border-bottom:1px solid var(--rule)}
.pg-console .err{color:#C2185B}
.pg-dragging iframe{pointer-events:none}

@media (max-width:820px){
  .pg-body{height:auto;overflow:auto}
  .pg-main{display:flex;flex-direction:column-reverse}
  .pg-split{display:none}
  .pg-view{height:56vh}
  .pg-code{height:60vh}
  .pg-hint{display:none}
}

/* CodeMirror theme matched to the site */
.cm-s-hb.CodeMirror{height:100%;background:#141312;color:#EEEBE5;font-family:'Geist Mono',ui-monospace,monospace;font-size:13.5px;line-height:1.6}
.cm-s-hb .CodeMirror-gutters{background:#141312;border-right:1px solid #2C2A27}
.cm-s-hb .CodeMirror-linenumber{color:#5E5A54}
.cm-s-hb .CodeMirror-cursor{border-left:2px solid #FF48B0}
.cm-s-hb .CodeMirror-activeline-background{background:#1D1B19}
.cm-s-hb div.CodeMirror-selected,.cm-s-hb .CodeMirror-focused div.CodeMirror-selected{background:#3A2A35}
.cm-s-hb .cm-tag{color:#F2B33D}
.cm-s-hb .cm-attribute{color:#7FB8E8}
.cm-s-hb .cm-string,.cm-s-hb .cm-string-2{color:#8FD19E}
.cm-s-hb .cm-keyword{color:#FF7AC6}
.cm-s-hb .cm-def,.cm-s-hb .cm-property{color:#7FB8E8}
.cm-s-hb .cm-variable-2,.cm-s-hb .cm-variable-3{color:#EEEBE5}
.cm-s-hb .cm-number,.cm-s-hb .cm-atom{color:#F09A6E}
.cm-s-hb .cm-comment{color:#7A756D;font-style:italic}
.cm-s-hb .cm-meta,.cm-s-hb .cm-qualifier,.cm-s-hb .cm-builtin{color:#C4A7E7}
.cm-s-hb .cm-bracket{color:#A6A198}
.cm-s-hb .CodeMirror-matchingbracket{color:#FFF !important;background:#3A3733}
.cm-s-hb .CodeMirror-foldgutter-open:after,.cm-s-hb .CodeMirror-foldgutter-folded:after{color:#6F6B64}