/* The whole section is the canvas. Only tools and tiles have chrome. */
.playground { margin:0; padding:0; width:100%; background:#000; color:#efefef; }
.pg-shell button,.pg-shell input,.pg-shell textarea,.pg-shell select { font:inherit; }
.pg-shell button { background:transparent; color:inherit; border:1px solid transparent; cursor:pointer; }
.pg-shell button:hover { background:#ffffff0c; }
.pg-shell button:disabled { opacity:.3; cursor:default; }
.pg-shell :is(button,input,textarea,select):focus-visible,.pg-viewport:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.pg-shell button[aria-pressed=true] { color:#d8eee9; background:#ffffff13; }
.pg-shell [hidden] { display:none!important; }
.pg-viewport { position:relative; height:clamp(880px,100svh,1150px); overflow:hidden; isolation:isolate; background:radial-gradient(#ffffff16 .7px,transparent .7px) 0 0/22px 22px,#000; touch-action:pan-y; cursor:grab; }
.pg-viewport[data-tool=pan],.pg-viewport[data-tool=draw],.pg-viewport[data-tool=text],.pg-viewport[data-tool=erase] { touch-action:none; }
.pg-viewport[data-tool=draw] { cursor:crosshair; }
.pg-viewport[data-tool=text] { cursor:text; }
.pg-viewport[data-tool=erase] { cursor:cell; }
.pg-viewport.is-gesturing { user-select:none; }
.pg-viewport.is-panning { cursor:grabbing; }
.playground-heading { position:absolute; z-index:1; top:108px; left:4%; right:4%; pointer-events:none; }
.playground-heading h3 { font-size:clamp(32px,3.3vw,50px); line-height:1.08; letter-spacing:-.05em; }
.playground-heading>p { margin-top:18px; font-size:15px; line-height:1.6; color:#828d8c; }
.playground-heading>.pg-demo-note { margin-top:10px; max-width:640px; font-size:11px; line-height:1.7; color:#9aa6a0; letter-spacing:.015em; }
.pg-viewport.has-content .playground-heading>h3 { opacity:.5; }
.pg-topbar { position:absolute; z-index:50; inset:22px 24px auto; display:flex; justify-content:space-between; align-items:center; gap:16px; pointer-events:none; cursor:default; }
.pg-canvas-name { display:flex; align-items:center; gap:10px; font-size:11px; color:#a4a4a4; letter-spacing:.08em; }
.pg-canvas-name img { object-fit:contain; }
.pg-top-actions { display:flex; align-items:center; gap:4px; pointer-events:auto; }
.pg-top-actions>button { min-width:34px; min-height:36px; border-radius:7px; font-size:21px; background:#0d0d0ded; }
.pg-top-actions>button[data-action=clear] { font-size:13px; padding-inline:12px; color:#a4a4a4; }
.pg-shell .pg-workspace-button { font-size:13px; padding:7px 12px; min-height:38px; border:1px solid #71dac84d; color:#b9e7d8; background:#11221b; border-radius:8px; }
.pg-shell .pg-add-button { border:1px solid #ffffff24; border-radius:8px; color:#e5eeeb; background:#191c1b; min-height:38px; padding:7px 14px; font-size:13px; }
.pg-shell .pg-add-button:hover { border-color:#71dac880; background:#1d2925; }
.pg-add-menu { position:absolute; z-index:60; top:0; left:0; width:300px; max-width:calc(100% - 24px); max-height:min(560px,calc(100svh - 36px)); overflow:auto; overscroll-behavior:contain; border:1px solid #ffffff24; border-radius:12px; padding:7px; background:#111111fa; box-shadow:0 18px 48px #0009; backdrop-filter:blur(18px); }
.pg-menu-target { padding:8px 10px 12px; color:#a3cab9; font-size:10px; overflow-wrap:anywhere; border-bottom:1px solid #ffffff14; }
.pg-menu-label { padding:10px 10px 5px; color:#777; font-size:10px; letter-spacing:.06em; }
.pg-menu-label:not(:first-child) { border-top:1px solid #ffffff0d; margin-top:7px; }
.pg-add-menu button { display:flex; align-items:center; gap:12px; padding:10px; width:100%; border-radius:7px; text-align:left; }
.pg-add-menu strong { display:block; font-size:14px; font-weight:500; }
.pg-add-menu small { display:block; margin-top:3px; font-size:11px; color:#8a8a8a; }
.pg-kind-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:24px; height:24px; border:1px solid #ececec26; border-radius:6px; color:#b8c5c1; background:#ffffff05; font:14px var(--mono); }
[data-add=claude]>.pg-kind-icon,.pg-tile[data-kind=claude] .pg-kind-icon,.pg-empty [data-add=claude]>span { color:#ef9b6a; border-color:#ef9b6a3d; background:#b05b331a; }
[data-add=codex]>.pg-kind-icon,.pg-tile[data-kind=codex] .pg-kind-icon,.pg-empty [data-add=codex]>span { color:#72d9c7; border-color:#72d9c73d; background:#2f97891a; }
[data-add=codex-cli]>.pg-kind-icon,.pg-tile[data-kind=codex-cli] .pg-kind-icon { color:#72d9c7; border-color:#72d9c73d; background:#2f97891a; }
.pg-menu-note { font-size:12px; line-height:1.5; padding:11px 10px 7px; color:#98aaa2; border-top:1px solid #ffffff14; margin-top:6px; }
.pg-world { position:absolute; z-index:2; top:0; left:0; width:1px; height:1px; transform-origin:0 0; }
.pg-workspaces { position:absolute; inset:0; z-index:1; width:1px; height:1px; }
.pg-workspace { position:absolute; overflow:hidden; border:1px solid #ffffff26; border-radius:22px; background:linear-gradient(135deg,#19383045,#06090e80 75%),#06090a; background-size:cover; background-position:center; box-shadow:0 24px 70px #0005; cursor:default; }
.pg-workspace.is-active { border-color:color-mix(in srgb,var(--workspace-accent) 52%,transparent); }
.pg-workspace-header { position:absolute; z-index:100000; top:12px; left:14px; right:14px; height:34px; display:flex; align-items:center; gap:4px; pointer-events:none; }
.pg-workspace-header>button,.pg-workspace-header>input { pointer-events:auto; }
.pg-workspace-handle { display:flex; align-items:center; gap:8px; flex:1; min-width:0; height:32px; padding:0 9px; border:1px solid #ffffff1c!important; border-radius:999px; background:#080c0ccf!important; text-align:left; cursor:grab!important; touch-action:none; }
.pg-workspace-dot { width:7px; height:7px; border-radius:2px; background:var(--workspace-accent); flex-shrink:0; }
.pg-workspace-handle strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:500; color:#d8e2dc; }
.pg-workspace-handle small { color:#6e8175; font-size:9px; margin-left:4px; }
.pg-workspace-header>button:not(.pg-workspace-handle) { height:30px; min-width:28px; border-radius:6px; font-size:17px; color:#a0b1a7; }
.pg-workspace-header>.pg-workspace-add { font-size:11px!important; padding:0 9px; color:#c3ded0!important; background:#0a1310d9; border:1px solid #ffffff1c; }
.pg-workspace-name { min-width:0; width:0; flex:1; height:32px; padding:0 9px; font-size:12px!important; border:1px solid #71dac880; border-radius:6px; background:#101914; color:#eee; }
.pg-workspace-tiles { position:absolute; inset:0; pointer-events:none; }
.pg-workspace-tiles>.pg-tile { pointer-events:auto; }
.pg-workspace-empty { position:absolute; top:50%; left:50%; transform:translate(-50%,-40%); width:85%; color:#7f9688; font-size:16px; text-align:center; pointer-events:none; }
.pg-workspace-empty button { pointer-events:auto; margin-top:16px; padding:9px 15px; border:1px solid #ffffff26; border-radius:7px; background:#0a1310; color:#bed8c8; font-size:13px; }
.pg-workspace-resize { z-index:100001!important; }
.pg-empty { position:absolute; z-index:4; top:58%; left:50%; transform:translate(-50%,-50%); width:min(92%,540px); text-align:center; cursor:default; pointer-events:none; }
.pg-empty-mark { display:block; object-fit:contain; margin:0 auto 24px; opacity:.6; }
.pg-empty h4 { margin:0; font-size:26px; font-weight:400; letter-spacing:-.035em; }
.pg-empty p { color:#818b89; font-size:15px; margin-top:10px; }
.pg-empty>div { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:24px; }
.pg-empty button { pointer-events:auto; font-size:13px; padding:10px 14px; border:1px solid #ffffff24; border-radius:8px; background:#101010; }
.pg-empty button>span { display:inline-block; margin-right:5px; border-radius:3px; }
.pg-empty .pg-empty-draw { margin-top:12px; border:0; background:transparent; color:#8eaaa2; font-size:13px; }
.pg-tile { position:absolute; z-index:10; display:flex; flex-direction:column; overflow:hidden; border:1px solid #ececec24; border-radius:14px; background:#080808; box-shadow:0 22px 54px #0006,inset 0 1px #ececec09; }
.pg-tile.is-selected { border-color:#c6ded880; box-shadow:0 0 0 1px #c6ded814,0 22px 60px #0009; }
.pg-tile-header { display:flex; align-items:center; height:38px; flex:none; gap:3px; padding:0 6px; border-bottom:1px solid #ececec11; background:#080808; }
.pg-tile-handle { display:flex; align-items:center; gap:9px; min-width:0; flex:1; align-self:stretch; text-align:left; padding:0 4px; touch-action:none; cursor:grab!important; }
.pg-tile-handle .pg-kind-icon { width:21px; height:21px; font-size:12px; }
.pg-tile-handle strong { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-tile-header>button:not(.pg-tile-handle) { height:28px; width:28px; flex:none; border-radius:5px; font-size:18px; color:#787878; }
.pg-preview-badge { font:9px var(--mono); color:#7d8c86; padding:3px 5px; border:1px solid #ffffff14; border-radius:4px; }
.pg-note { flex:1; width:100%; min-height:0; border:0; background:transparent; color:#d8dedc; padding:20px; resize:none; font:17px/1.6 var(--sans)!important; overscroll-behavior:contain; }
.pg-note::placeholder { color:#777; }
.pg-board-body { display:flex; flex:1; flex-direction:column; min-height:0; padding:14px; gap:12px; }
.pg-board-columns { display:grid; grid-template-columns:repeat(3,minmax(145px,1fr)); flex:1; min-height:55px; overflow:auto; overscroll-behavior:contain; gap:10px; align-items:start; }
.pg-board-column { min-width:0; min-height:100%; padding:10px; border:1px solid #ffffff14; border-radius:7px; background:#ffffff03; }
.pg-board-column-heading { display:flex; justify-content:space-between; gap:8px; font-size:12px; padding-bottom:12px; color:#d2ded9; }
.pg-board-column-heading strong { font-weight:500; }
.pg-task-count { color:#899b93; }
.pg-task-empty { font-size:12px; color:#7e8c85; padding:8px 0; }
.pg-task-list { display:grid; gap:8px; }
.pg-task-card { padding:9px; border:1px solid #ffffff1e; background:#131a17; border-radius:6px; }
.pg-task-card>p { font-size:13px; line-height:1.5; overflow-wrap:anywhere; color:#d6e2db; }
.pg-task-controls { display:flex; align-items:center; gap:4px; margin-top:12px; }
.pg-task-controls select { min-width:0; width:100%; padding:5px 2px; font-size:11px; color:#a3c2b2; background:#17231c; border:1px solid #ffffff14; border-radius:4px; }
.pg-task-controls button { flex:none; font-size:19px; color:#94a89b; width:22px; }
.pg-task-form { display:flex; gap:6px; }
.pg-task-form input { width:100%; min-width:0; padding:9px 10px; border:1px solid #ffffff24; border-radius:6px; background:#111; color:#d6e7e7; font-size:14px; }
.pg-task-form input::placeholder { color:#808984; }
.pg-task-form button { flex-shrink:0; font-size:13px; padding:0 10px; border:1px solid #ffffff24; border-radius:6px; }
.pg-browser-body { display:flex; flex:1; flex-direction:column; min-height:0; overflow:auto; overscroll-behavior:contain; }
.pg-browser-tabs { display:flex; padding:8px 12px 0; gap:6px; border-bottom:1px solid #ffffff14; }
.pg-browser-tabs button { padding:7px 12px; font-size:12px; color:#96a49c; border-bottom:2px solid transparent; }
.pg-browser-tabs button[aria-pressed=true] { color:#d6e1dc; background:#ffffff06; border-bottom-color:#719fea; }
.pg-browser-address { margin:10px 14px 0; padding:7px 11px; color:#97a9a0; border:1px solid #ffffff18; border-radius:7px; font:11px var(--mono); background:#ffffff03; }
.pg-browser-page { flex:1; padding:24px; }
.pg-browser-page>.mono { font-size:10px; color:#7ca4d5; }
.pg-browser-page h4 { font-size:22px; font-weight:500; letter-spacing:-.04em; line-height:1.2; margin:15px 0 10px; }
.pg-browser-page>p { color:#8eaaa5; font-size:13px; line-height:1.6; }
.pg-browser-body>.pg-preview-footer { padding:0 14px 12px; }
.pg-terminal-body { display:flex; flex:1; flex-direction:column; min-height:0; gap:18px; padding:20px; overflow:auto; overscroll-behavior:contain; font:12px/1.65 var(--mono); color:#ccc; }
.pg-terminal-context { display:flex; justify-content:space-between; gap:12px; color:#6d8077; font-size:11px; }
.pg-terminal-welcome { margin:4px 0; color:#838383; }
.pg-cli-brand { display:flex; align-items:center; gap:14px; margin:4px 0; }
.pg-cli-mark { font-size:38px; color:#ef9b6a; line-height:1; }
.pg-tile[data-kind=codex-cli] .pg-cli-mark { color:#72d9c7; }
.pg-cli-brand strong { display:block; font-size:17px; font-weight:500; color:#e1d9d4; }
.pg-cli-brand p { color:#86817e; font-size:11px; margin-top:5px; }
.pg-terminal-prompt { display:flex; align-items:start; gap:10px; flex:1; min-height:80px; }
.pg-prompt-symbol { color:#91d4b4; padding-top:3px; }
.pg-tile[data-kind=claude] .pg-terminal-prompt { border-top:1px solid #ef9b6a40; padding-top:12px; }
.pg-tile[data-kind=claude] .pg-prompt-symbol { color:#ef9b6a; }
.pg-draft { display:block; width:100%; min-height:80px; flex:1; padding:3px 0; resize:none; border:0; background:transparent; color:#ddd; font:12px/1.65 var(--mono)!important; overscroll-behavior:contain; }
.pg-draft::placeholder { color:#656b68; }
.pg-shell .pg-draft:focus-visible { outline:none; }
.pg-terminal-prompt:focus-within { box-shadow:inset 2px 0 #ffffff26; padding-left:8px; }
.pg-preview-footer { margin-top:auto; font:10px/1.5 var(--mono); color:#727872; }
.pg-codex-body { display:flex; flex:1; flex-direction:column; min-height:0; padding:18px; overflow:auto; overscroll-behavior:contain; }
.pg-codex-context { display:flex; align-items:center; gap:6px; font:10px var(--mono); color:#808b86; }
.pg-codex-greeting { display:flex; flex:1; min-height:80px; align-items:center; justify-content:center; text-align:center; font-size:22px; letter-spacing:-.04em; color:#c4cdc8; }
.pg-codex-composer { padding:13px 14px 10px; border:1px solid #ffffff24; border-radius:18px; background:#151515; }
.pg-codex-composer:focus-within { border-color:#ffffff45; }
.pg-codex-composer .pg-draft { font:14px/1.5 var(--sans)!important; min-height:56px; }
.pg-composer-bottom { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:#727a76; }
.pg-composer-bottom>span:first-child { color:#afc4b9; font-size:12px; }
.pg-codex-body>.pg-preview-footer { padding-top:10px; text-align:center; }
.pg-resize { position:absolute; z-index:15; right:2px; bottom:2px; width:22px; height:22px; touch-action:none; cursor:nwse-resize!important; background:linear-gradient(135deg,transparent 60%,#acb4af66 61%,#acb4af66 65%,transparent 66%,transparent 75%,#acb4af66 76%,#acb4af66 80%,transparent 81%)!important; }
.pg-ink { position:absolute; inset:0; width:1px; height:1px; overflow:visible; z-index:3; pointer-events:none; }
.pg-ink path { fill:none; stroke-linecap:round; stroke-linejoin:round; pointer-events:stroke; }
.pg-labels { position:absolute; inset:0; z-index:5; pointer-events:none; }
.pg-text { position:absolute; width:270px; padding:4px; font:500 25px/1.4 var(--sans); white-space:pre-wrap; overflow-wrap:anywhere; cursor:move; touch-action:none; pointer-events:auto; }
.pg-text:focus-visible { outline:1px dashed currentColor; outline-offset:4px; }
.pg-text-editor { position:absolute; z-index:30; width:270px; min-height:90px; padding:4px; border:1px dashed #71dac8; resize:none; background:#111111ed; font:500 25px/1.4 var(--sans)!important; color:#71dac8; }
.pg-palette { position:absolute; z-index:40; top:280px; left:24px; width:275px; max-width:calc(100% - 16px); padding:5px 6px 7px; border:1px solid #ffffff26; border-radius:10px; background:#111111f5; box-shadow:0 8px 25px #0008; }
.pg-palette-header { display:flex; align-items:center; gap:4px; height:30px; }
.pg-palette-header strong { font-size:13px; font-weight:500; flex:1; }
.pg-palette button { min-width:30px; min-height:30px; padding:1px 5px; border-radius:4px; font-size:18px; }
.pg-palette-grip { cursor:grab!important; touch-action:none; color:#828d87!important; }
.pg-palette-body { display:flex; align-items:center; gap:4px; justify-content:space-between; padding-top:5px; }
.pg-palette-body input { appearance:none; width:26px; height:26px; padding:2px; border:1px solid #ffffff26; border-radius:4px; background:transparent; cursor:pointer; }
.pg-palette-body label { display:flex; }
.pg-palette-body select { min-height:28px; max-width:65px; font-size:12px; color:#b7c0bb; background:#191919; border:1px solid #ffffff26; border-radius:4px; }
.pg-palette.is-minimized { width:180px; }
.pg-view-controls { position:absolute; z-index:35; left:24px; bottom:82px; display:flex; align-items:center; gap:2px; padding:4px; border:1px solid #ffffff26; border-radius:9px; background:#111111f2; box-shadow:0 5px 20px #0005; }
.pg-view-controls button { width:32px; height:34px; border-radius:5px; font-size:21px; }
.pg-view-controls>span { width:1px; height:18px; background:#ffffff20; margin:0 4px; }
.pg-view-controls output { min-width:48px; font-size:12px; text-align:center; color:#b7c4bd; }
.pg-tools-launch { position:absolute; z-index:35; right:24px; bottom:82px; border:1px solid #ffffff26!important; border-radius:9px; background:#111111f2!important; padding:11px 13px; font-size:13px; }
.pg-status { position:absolute; z-index:1; inset:auto 24px 49px; display:flex; justify-content:space-between; gap:16px; color:#707d76; font-size:11px; pointer-events:none; }
.pg-feedback { color:#95b2a6; text-align:right; max-width:330px; }
.pg-mobile-help { display:none; }
.pg-footnote { position:absolute; z-index:1; bottom:21px; left:24px; right:24px; color:#616d66; font-size:11px; line-height:1.6; pointer-events:none; }
@media(max-width:700px) {
  .pg-viewport { height:860px; }
  .pg-topbar { inset:16px 12px auto; gap:10px; flex-wrap:wrap; }
  .pg-canvas-name { font-size:9px; gap:6px; line-height:1.4; }
  .pg-canvas-name img { width:19px; height:19px; }
  .pg-top-actions { gap:3px; width:100%; justify-content:space-between; }
  .pg-top-actions>button { min-width:27px; font-size:19px; }
  .pg-top-actions>button[data-action=clear] { font-size:12px; padding-inline:7px; }
  .pg-shell .pg-add-button { font-size:12px; padding-inline:10px; }
  .pg-shell .pg-workspace-button { font-size:12px; padding-inline:8px; }
  .playground-heading { top:118px; left:6%; right:6%; }
  .playground-heading h3 { font-size:33px; }
  .playground-heading>p { font-size:13px; max-width:270px; }
  .playground-heading>.pg-demo-note { font-size:10px; max-width:440px; }
  .pg-empty { top:58%; }
  .pg-workspace-handle small { display:none; }
  .pg-empty h4 { font-size:23px; }
  .pg-empty p { font-size:13px; }
  .pg-empty button { font-size:12px; padding:9px; }
  .pg-empty>div { gap:6px; }
  .pg-view-controls { left:12px; bottom:110px; padding:3px; }
  .pg-view-controls button { width:29px; }
  .pg-view-controls output { min-width:43px; }
  .pg-tools-launch { right:12px; bottom:110px; padding:11px 10px; font-size:12px; }
  .pg-status { inset:auto 16px 62px; display:block; font-size:10px; line-height:1.6; }
  .pg-desktop-help { display:none; }
  .pg-mobile-help { display:inline; }
  .pg-feedback { display:block; text-align:left; max-width:none; margin-top:3px; }
  .pg-footnote { bottom:19px; left:16px; right:16px; max-width:390px; font-size:10px; }
}
@media(max-width:360px) { .pg-tools-launch span { display:none; } }