/* Practical labs share the site palette; every workspace owns its main view. */
.pl { --pl-muted: #c9b7de; }
.pl .ds-hero { position: relative; overflow: hidden; padding: 32px; background: radial-gradient(ellipse at top right, #62408b 0, transparent 58%), #24192f; }
.pl .ds-hero::after { content: ''; position: absolute; width: 160px; height: 160px; right: -50px; top: -60px; border: 28px solid #d9afff12; border-radius: 50%; pointer-events: none; }
.pl .ds-layout { grid-template-columns: minmax(310px, 390px) minmax(0, 1fr); align-items: start; }
.pl .ds-controls { max-height: none; }
.pl .ds-preview { overflow: hidden; min-height: 520px; }
.pl .ds-toolbar { gap: 10px; }
.pl .ds-file { position: relative; }
.pl .ds-file input[type=file] { width: 1px; height: 1px; padding: 0; clip-path: inset(50%); pointer-events: none; }
.pl button, .pl .ds-file { scroll-margin-top: 100px; }
.pl textarea { font: 13px/1.6 ui-monospace, Consolas, monospace; min-height: 140px; }
.pl .pl-presets { padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid #654d7d; }
.pl .pl-presets button { font-size: 12px; padding: 9px 12px; }
.pl .pl-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; margin-bottom: 20px; }
.pl .pl-metrics > div { padding: 18px; border: 1px solid #79579b; border-radius: 13px; background: linear-gradient(135deg, #432a5a, #251c33); min-width: 0; }
.pl .pl-metrics span { display: block; font-size: 12px; color: #dcc6f4; margin-bottom: 8px; }
.pl .pl-metrics strong { font-size: 23px; display: block; overflow-wrap: anywhere; }
.pl .pl-note { color: #decfed; background: #1b1526; border-left: 3px solid #b889eb; padding: 14px 17px; font-size: 13px; line-height: 1.7; }
.pl .pl-error { padding: 24px; background: #3b2034; border: 1px solid #d894af; border-radius: 12px; }
.pl .pl-table { max-height: 450px; overflow: auto; border: 1px solid #634b79; border-radius: 10px; }
.pl .pl-table table { font-size: 13px; }
.pl .pl-table th { position: sticky; top: 0; background: #3c2a50; z-index: 1; }
.pl .pl-table td, .pl .pl-table th { min-width: 100px; max-width: 360px; padding: 12px; }
.pl .pl-table tr:nth-child(even) { background: #1d1729; }
.pl .pl-table-section { margin-top: 24px; }
.pl .pl-visual { overflow: auto; border: 1px solid #6d4e89; border-radius: 13px; }
.pl .pl-visual svg { display: block; width: 100%; min-width: 520px; height: auto; }
.pl .pl-visual svg text { fill: #e6d7f5; font-family: system-ui, sans-serif; }
.pl .pl-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl .pl-detail { border: 1px solid #59436f; padding: 16px; border-radius: 10px; margin: 16px 0; }
.pl .pl-detail summary { cursor: pointer; font-weight: 600; }
.pl .pl-chip { display: inline-block; border: 1px solid #906aac; border-radius: 7px; padding: 5px 9px; margin: 3px; background: #352343; font-family: ui-monospace, monospace; }
.pl .pl-binding { border: 1px solid #644979; padding: 14px; border-radius: 12px; margin: 10px 0; }
.pl .pl-binding h3 { margin: 0 0 8px; }
.pl .pl-binding small { display: block; color: var(--pl-muted); }
.pl .pl-stage { padding: 24px; border: 1px solid #916ab5; background: linear-gradient(135deg, #3e2954, #20172d); border-radius: 16px; }
.pl .pl-stage p { white-space: pre-wrap; }
.pl .pl-stage .ds-actions { align-items: stretch; }
.pl .pl-stage button { flex: 1 1 160px; }
.pl .pl-code { background: #17111f; border: 1px solid #644479; border-radius: 10px; padding: 16px; font: 14px/1.8 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.pl .pl-texture { display: block; width: 100%; height: auto; background-color: #21182d; border-radius: 8px; }
.pl .pl-canvas-wrap { overflow: hidden; border: 1px solid #73548b; border-radius: 12px; }
.pl .pl-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pl .pl-tabs button[aria-pressed=true] { background: #8854be; border-color: #d9b2fa; }
.pl .pl-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.pl .pl-help-grid p { margin-bottom: 0; }
.pl:fullscreen { padding: 24px; }
@media (max-width: 1000px) {
  .pl .ds-layout { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 14px; }
  .pl .pl-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .pl .ds-layout { grid-template-columns: minmax(0, 1fr); }
  .pl .ds-hero { padding: 24px; }
  .pl .ds-controls, .pl .ds-preview { padding: 16px; }
  .pl .pl-metrics strong { font-size: 19px; }
  .pl .pl-visual svg text { font-size: 18px; }
}
@media (max-width: 480px) {
  .pl .ds-toolbar > * { flex: 1 1 40%; }
  .pl .pl-columns { grid-template-columns: minmax(0, 1fr); }
}

.pl .pl-code { margin-bottom: 18px; }
.pl .pl-visual { max-height: 560px; }
.pl .pl-table td, .pl .pl-table th { word-break: normal; }
.pl .pl-edge-editor { padding: 12px; border: 1px solid #624975; border-radius: 9px; margin: 12px 0; }
.pl .pl-edge-editor .ds-field { margin-bottom: 10px; }