/* Implements [WASM-PLAN-SITE]. A focused app surface built on the site tokens. */
.playground{--pg-accent:#f05a19;max-width:1500px;margin:auto;padding:clamp(3rem,7vw,6.5rem) clamp(1rem,4vw,4rem) 5rem}.playground-intro{display:flex;align-items:end;justify-content:space-between;gap:3rem;margin-bottom:2rem}.playground-intro h1{max-width:900px;margin:.25rem 0 .75rem;font-size:clamp(2.7rem,6vw,6.4rem);line-height:.94;letter-spacing:-.065em;color:var(--color-text-primary)}.playground-intro h1 em{color:var(--pg-accent);font-style:normal}.playground-intro p:not(.playground-eyebrow){max-width:680px;margin:0;color:var(--color-text-secondary);font-size:clamp(1rem,1.5vw,1.25rem)}.playground-eyebrow{display:flex;align-items:center;gap:.55rem;margin:0;color:var(--color-text-muted);font:700 .72rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}.playground-eyebrow span{width:9px;height:9px;border-radius:50%;background:var(--pg-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--pg-accent) 14%,transparent)}.playground-proof{display:grid;flex:none;gap:.45rem;padding-bottom:.5rem;color:var(--color-text-muted);font:600 .73rem var(--font-mono);text-transform:uppercase;letter-spacing:.07em}.playground-proof span:before{content:"✓";margin-right:.6rem;color:var(--pg-accent)}
.playground-shell{overflow:hidden;border:1px solid color-mix(in srgb,var(--color-text-primary) 16%,transparent);border-radius:18px;background:var(--color-bg-secondary);box-shadow:0 32px 80px rgba(15,18,20,.18),0 2px 0 rgba(255,255,255,.05) inset}.playground-toolbar,.playground-statusbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:58px;padding:.65rem 1rem;border-bottom:1px solid var(--color-border)}.playground-file,.playground-actions,.playground-actions label{display:flex;align-items:center;gap:.7rem}.playground-file{font:.8rem var(--font-mono)}.python-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:7px;color:#fff;background:var(--pg-accent);font:800 .65rem var(--font-mono)}.dirty-dot{width:6px;height:6px;border-radius:50%;background:var(--pg-accent)}.playground-actions label{color:var(--color-text-muted);font:.72rem var(--font-mono)}.playground-actions select{padding:.55rem .7rem;border:1px solid var(--color-border);border-radius:7px;color:var(--color-text-primary);background:var(--color-bg-primary)}.playground-button{min-height:38px;padding:0 .85rem;border:1px solid var(--pg-accent);border-radius:8px;color:#fff;background:var(--pg-accent);font-weight:700;cursor:pointer}.playground-button:hover{filter:brightness(1.1);transform:translateY(-1px)}.playground-button:disabled{opacity:.6;cursor:wait}.playground-button kbd{margin-left:.65rem;padding-left:.65rem;border-left:1px solid #ffffff4d;color:#ffffffcc;font:.68rem var(--font-mono)}.playground-button--quiet{border-color:var(--color-border);color:var(--color-text-secondary);background:transparent}
.playground-workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);min-height:590px}.editor-pane{position:relative;min-width:0;border-right:1px solid var(--color-border)}.editor-pane #editor{position:absolute;inset:0}.editor-loading{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:1rem;color:var(--color-text-muted);font:.75rem var(--font-mono);background:var(--color-bg-secondary)}.loader-orbit{width:28px;height:28px;border:2px solid var(--color-border);border-top-color:var(--pg-accent);border-radius:50%;animation:pg-spin .8s linear infinite}@keyframes pg-spin{to{transform:rotate(1turn)}}
.diagnostics-pane{min-width:0;background:color-mix(in srgb,var(--color-bg-secondary) 93%,var(--pg-accent))}.diagnostics-head{display:flex;align-items:end;justify-content:space-between;padding:1.5rem 1.4rem 1rem}.diagnostics-head h2{margin:.2rem 0 0;font-size:1.15rem}.diagnostics-kicker{color:var(--color-text-muted);font:700 .65rem var(--font-mono);text-transform:uppercase;letter-spacing:.13em}.diagnostic-count{display:grid;place-items:center;min-width:29px;height:29px;padding:0 .5rem;border-radius:99px;color:#ffb09a;background:#f05a1929;font:700 .72rem var(--font-mono)}.diagnostic-count.is-clean{color:#6fdcae;background:#26ae701f}.engine-status{display:flex;align-items:center;gap:.55rem;padding:.65rem 1.4rem;border-block:1px solid var(--color-border);color:var(--color-text-muted);font:.68rem var(--font-mono)}.engine-status span{width:7px;height:7px;border-radius:50%;background:#a0a4a8}.engine-status.is-ready span{background:#2cc780;box-shadow:0 0 0 4px #2cc7801f}.engine-status.is-loading span{background:#f4b942;animation:pg-pulse 1s infinite}.engine-status.is-error{color:#f87171}@keyframes pg-pulse{50%{opacity:.35}}
.diagnostics-list{max-height:500px;margin:0;padding:.7rem;overflow:auto;list-style:none}.diagnostics-list>li:not(.diagnostics-empty){position:relative;margin-bottom:.55rem;border:1px solid var(--color-border);border-radius:10px;background:color-mix(in srgb,var(--color-bg-primary) 78%,transparent)}.diagnostics-list>li>a{position:absolute;z-index:1;top:.8rem;left:.85rem;color:var(--pg-accent);font:800 .69rem var(--font-mono);text-decoration:none}.diagnostics-list button{width:100%;padding:2rem .85rem .85rem;border:0;text-align:left;color:inherit;background:transparent;cursor:pointer}.diagnostic-location{float:right;color:var(--color-text-muted);font:.66rem var(--font-mono)}.diagnostic-message{display:block;color:var(--color-text-secondary);font-size:.82rem;line-height:1.5}.diagnostics-empty{display:grid;place-items:center;padding:7rem 1.5rem;text-align:center;color:var(--color-text-muted)}.diagnostics-empty strong{color:var(--color-text-secondary)}.diagnostics-empty p{max-width:230px;margin:.4rem 0 0;font-size:.8rem}.empty-glyph{display:grid;place-items:center;width:46px;height:46px;margin-bottom:1rem;border:1px solid var(--color-border);border-radius:14px;color:var(--pg-accent);font-size:1.4rem}.diagnostics-empty--clean .empty-glyph{color:#2cc780}
.playground-statusbar{min-height:34px;justify-content:flex-end;padding-block:.35rem;border-top:1px solid var(--color-border);border-bottom:0;color:var(--color-text-muted);font:.64rem var(--font-mono)}.playground-statusbar span:first-child{margin-right:auto;color:var(--pg-accent)}.playground-examples{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:1rem}.playground-examples>span{margin-right:.4rem;color:var(--color-text-muted);font:700 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em}.playground-examples button{padding:.65rem .8rem;border:1px solid var(--color-border);border-radius:99px;color:var(--color-text-secondary);background:var(--color-bg-secondary);cursor:pointer}.playground-examples button:hover{border-color:var(--pg-accent);color:var(--color-text-primary)}.playground-examples i{margin-left:.45rem;color:var(--pg-accent);font-style:normal}
@media(max-width:850px){.playground-intro{align-items:start;flex-direction:column;gap:1.25rem}.playground-proof{grid-template-columns:repeat(3,auto)}.playground-workspace{grid-template-columns:1fr}.editor-pane{min-height:500px;border-right:0;border-bottom:1px solid var(--color-border)}.diagnostics-pane{min-height:360px}.playground-actions label{display:none}}@media(max-width:560px){.playground{padding-inline:.65rem}.playground-intro{padding-inline:.4rem}.playground-proof{grid-template-columns:1fr}.playground-toolbar{align-items:stretch;flex-direction:column}.playground-actions{justify-content:space-between}.playground-button kbd{display:none}.playground-workspace{min-height:0}.editor-pane{min-height:460px}.playground-statusbar span:nth-last-child(-n+2){display:none}}

/* Full-viewport application layout. The playground is a tool, not a landing
   page: the document never scrolls and Monaco owns every available pixel below
   the site navigation. */
html:has(.playground),body:has(.playground){height:100%;overflow:hidden}
body:has(.playground) #main-content{height:calc(100dvh - 73px);min-height:0;overflow:hidden}
body:has(.playground) .site-footer{display:none}
.playground{width:100%;height:100%;max-width:none;margin:0;padding:0}
.playground-intro,.playground-examples{display:none}
.playground-shell{display:grid;grid-template-rows:58px minmax(0,1fr) 34px;width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
.playground-toolbar{min-height:0}
.playground-presets{display:flex;align-items:center;gap:.4rem;min-width:0;margin-inline:auto}.playground-presets>span{color:var(--color-text-muted);font:700 .62rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.playground-presets button{min-height:30px;padding:0 .6rem;border:1px solid var(--color-border);border-radius:6px;color:var(--color-text-secondary);background:transparent;font:600 .68rem var(--font-mono);white-space:nowrap;cursor:pointer}.playground-presets button:hover{border-color:var(--pg-accent);color:var(--color-text-primary);background:color-mix(in srgb,var(--pg-accent) 8%,transparent)}
.playground-workspace{min-height:0;height:auto}
.editor-pane{min-height:0}
.diagnostics-pane{min-height:0;overflow:hidden}
.diagnostics-list{height:calc(100% - 126px);max-height:none}
.playground-statusbar{min-height:0}
@media(max-width:850px){
  .playground-workspace{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}
  .editor-pane{min-height:0;border-right:1px solid var(--color-border);border-bottom:0}
  .diagnostics-pane{min-height:0}
  .playground-presets>span{display:none}
  .playground-presets button{padding-inline:.45rem;font-size:.62rem}
}
@media(max-width:700px){
  body:has(.playground) #main-content{height:calc(100dvh - 64px)}
  .playground-shell{grid-template-rows:auto minmax(0,1fr) 34px}
  .playground-toolbar{display:grid;grid-template-columns:auto 1fr;align-items:center;padding:.5rem .65rem}
  .playground-actions{justify-self:end}
  .playground-presets{grid-column:1/-1;grid-row:2;width:100%;margin:0;overflow-x:auto;padding-top:.15rem;scrollbar-width:none}
  .playground-presets::-webkit-scrollbar{display:none}
  .playground-presets button{flex:1;padding-inline:.5rem}
  .playground-file strong,.dirty-dot{display:none}
  .playground-workspace{grid-template-columns:1fr;grid-template-rows:minmax(0,3fr) minmax(180px,2fr)}
  .editor-pane{min-height:0;border-right:0;border-bottom:1px solid var(--color-border)}
  .diagnostics-pane{min-height:0}
  .diagnostics-head{padding:.7rem 1rem .55rem}
  .diagnostics-head h2{font-size:1rem}
  .engine-status{padding:.45rem 1rem}
  .diagnostics-list{height:calc(100% - 91px)}
  .diagnostics-empty{padding:2rem 1rem}
}