:root{color-scheme:light;--bg-a: #f2f6ff;--bg-b: #dfe9ff;--panel: #ffffff;--ink: #12203a;--muted: #4d5e82;--line: #cedaf3;--accent: #1f7aff;--danger: #b3352f;--ok: #177a43}*,*:before,*:after{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:Space Grotesk,Segoe UI,sans-serif;color:var(--ink);background:radial-gradient(circle at 15% 20%,#fff,#fff0 45%),linear-gradient(160deg,var(--bg-a),var(--bg-b));overflow:hidden}.playground-header{width:100%;min-height:64px;padding:10px 16px;display:flex;align-items:center;gap:14px;background:color-mix(in srgb,var(--panel) 92%,#e7efff 8%);border-bottom:1px solid var(--line);box-shadow:0 8px 22px #203d7114}.playground-brand{width:min(188px,52vw);display:flex;align-items:center}.playground-logo{width:100%;height:auto;display:block}.playground-header-title{padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:13px;font-weight:800;line-height:1}.layout{width:100vw;height:calc(100vh - 64px);margin:0;padding:14px;display:grid;gap:12px;grid-template-columns:minmax(420px,1.5fr) minmax(360px,1.2fr) minmax(300px,1fr);grid-template-areas:"editor preview output";grid-template-rows:minmax(0,1fr);animation:rise .45s ease-out}.panel{min-height:0;display:flex;flex-direction:column;background:color-mix(in srgb,var(--panel) 88%,#f0f5ff 12%);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 10px 24px #203d7114}.editor{grid-area:editor}.output{grid-area:output;display:flex;flex-direction:column;gap:10px;min-width:0}.preview{grid-area:preview;overflow:auto}.input-tabs,.output-tabs{display:flex;gap:8px;flex-wrap:wrap}.input-panels{margin-top:10px;flex:1;min-height:0;display:flex;min-width:0}.input-panel{display:none;flex-direction:column;min-height:0;min-width:0;width:100%}.input-panel.is-active{display:flex}.output-head{display:flex;flex-direction:column;gap:8px}.output-panels{flex:1;min-height:0;min-width:0;display:flex}.output-panel{display:none;min-width:0;min-height:0;width:100%}.output-panel.is-active{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.status-bar{display:flex;gap:12px;margin:12px 0}@media(max-width:1250px){.layout{height:auto;min-height:100vh;overflow:auto;grid-template-columns:1fr 1fr;grid-template-areas:"editor preview" "output output";grid-template-rows:auto auto}body{overflow:auto}}@media(max-width:920px){.layout{grid-template-columns:1fr;grid-template-areas:"editor" "preview" "output"}}h1,h2,h3{margin:0 0 8px}h1{font-size:26px}h2{font-size:15px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}p{margin:0;color:var(--muted)}label{display:block;font-weight:700;margin-bottom:8px}textarea{width:100%;min-height:0;height:100%;resize:none;border-radius:10px;border:1px solid var(--line);background:#f8fbff;padding:12px;font:500 14px/1.45 JetBrains Mono,ui-monospace,monospace;color:#1a2f56}.input-panel textarea{flex:1}.status{font-weight:700}.status[data-tone=ok]{color:var(--ok)}.status[data-tone=error]{color:var(--danger)}.compile-perf{margin-bottom:0;font-weight:700;color:#173c80}.compile-metrics{margin-top:4px;margin-bottom:0;font-weight:700;color:#26406d}.panel-metrics{margin:0;font-weight:700;color:#26406d}.tab-btn{border-radius:10px;border:1px solid var(--line);background:#fff;color:#26406d;padding:7px 10px;font-weight:700}.tab-btn.is-active{border-color:#7ea8ff;background:#edf4ff;color:#173c80}.code-frame{display:flex;width:100%;min-height:0;height:100%;border-radius:10px;overflow:hidden}.input-panel .code-frame,.output-panel .code-frame{flex:1;min-height:0}.code-frame-light{border:1px solid var(--line);background:#f8fbff}.code-frame-dark{border:1px solid #1c315b;background:#0f1b33}.line-numbers{margin:0;min-width:52px;padding:12px 8px;overflow:hidden;text-align:right;-webkit-user-select:none;user-select:none;pointer-events:none;white-space:pre;font:500 13px/1.45 JetBrains Mono,ui-monospace,monospace}.code-frame-light .line-numbers{color:#8092b6;background:#eef4ff;border-right:1px solid #d6e3fb}.code-frame-dark .line-numbers{color:#7f95be;background:#0a1428;border-right:1px solid #1f3661}#luisInput{border:0;border-radius:0;background:transparent}.controls{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}button{border-radius:10px;border:1px solid var(--line);background:#fff;padding:8px 12px;font-weight:600}button{cursor:pointer}.language-control{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:800}.language-control select{border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 10px;font:inherit}button:hover{border-color:#aec6f7;background:#f3f7ff}#cssOutput{margin:0;min-height:0;width:100%;max-width:100%;height:100%;overflow:auto;background:#0f1b33;color:#dde9ff;border-radius:10px;padding:12px;font:500 13px/1.45 JetBrains Mono,ui-monospace,monospace;white-space:pre}#cssOutput{border-radius:0}.preview .card{margin-bottom:12px}#previewMount{min-height:0}@keyframes rise{0%{transform:translateY(10px);opacity:.6}to{transform:translateY(0);opacity:1}}