@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");:root{--bg:#f7f3e9;--ink:#1d2d2f;--muted:#556568;--panel:#fffdf8;--line:#d6cdb7;--accent:#d85b28;--accent-2:#1f6f78;--output:#131a1b}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:Chakra Petch,sans-serif;background:radial-gradient(circle at 15% 20%,#fff9eb 0,#f7f3e9 45%,#efe6d7 100%)}a{color:var(--accent-2)}#app{width:min(1200px,100% - 2rem);margin:1.2rem auto 2rem}.shell{border:1px solid var(--line);border-radius:22px;padding:1.2rem;background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.58));box-shadow:0 16px 40px rgba(29,45,47,.12);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:settle .6s ease}.hero{margin-bottom:1rem}.kicker{margin:0;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);font-weight:600}h1{margin:.25rem 0;font-size:clamp(2rem,3.6vw,3rem);line-height:1}h3{margin:1rem 0 .35rem}.hero-title{display:flex;align-items:center;gap:.5rem}.hero-title .logo{height:1em;width:auto;display:block}.subtitle{margin:0;color:var(--muted)}.grid,.workspace-grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:start}.grid,.runtime-stack,.workspace-grid{display:grid;grid-gap:1rem;gap:1rem}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1rem 0}button,select{border:1px solid var(--line);border-radius:10px;padding:.55rem .75rem;font-family:Chakra Petch,sans-serif;font-size:.97rem;background:var(--panel);color:var(--ink)}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.65}button.run{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}.panel{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:.9rem;animation:rise .5s ease both}.panel:nth-child(2){animation-delay:80ms}.panel-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.35rem 1rem}.panel-toolbar{margin:.35rem 0 .75rem}h2{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-2)}.panel-meta,h2{margin:0 0 .45rem}.panel-meta{color:var(--muted);font-size:.92rem}.debugger-placeholder,.panel-note{border:1px dashed #d5c8a9;border-radius:12px;padding:.9rem;background:#faf7ef;color:var(--muted)}.panel-note{margin:0}.debugger-placeholder p{margin-top:0}.debugger-placeholder ul,.spec ul{padding-left:1.15rem}.debugger-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.debugger-badge{display:inline-flex;align-items:center;border-radius:999px;padding:.25rem .7rem;font-size:.82rem;font-weight:700;background:#eef3f4;color:var(--accent-2)}.debugger-badge--running{background:#fff2d8;color:#9a5a00}.debugger-badge--completed{background:#e7f7eb;color:#21663a}.debugger-badge--stopped{background:#ece7fb;color:#5e48a6}.debugger-badge--error{background:#fde8e6;color:#a83d2c}.debugger-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:.6rem;gap:.6rem;margin-top:.4rem}.debugger-stat{border:1px solid #e2d7bc;border-radius:10px;padding:.65rem .75rem;background:#fcf8ee}.debugger-stat span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.debugger-stat strong{display:block;margin-top:.18rem}.debugger-error,.debugger-last-output{border-radius:10px;padding:.75rem .85rem;margin:.8rem 0 0}.debugger-last-output{background:#f7f2e5;border:1px solid #e2d7bc}.debugger-error{background:#fff0ed;border:1px solid #efc4bc;color:#8b2f20}.debugger-events{list-style:none;padding:0;margin:.65rem 0 0;display:grid;grid-gap:.55rem;gap:.55rem}.debugger-event{border:1px solid #e2d7bc;border-radius:10px;padding:.65rem .75rem;background:#fffefa}.debugger-event-head{display:flex;justify-content:space-between;gap:.75rem;font-size:.82rem}.debugger-event-head span{color:var(--muted)}.debugger-event-body{margin-top:.25rem;color:var(--muted);font-size:.92rem;word-break:break-word}.canvas-wrap{display:flex;justify-content:center;padding-top:.2rem}.spec{margin-top:1rem}.spec>a{font-weight:600}pre,textarea{width:100%;margin:0;border-radius:12px;border:1px solid #d5c8a9;padding:.9rem;font-family:IBM Plex Mono,monospace;font-size:.9rem;line-height:1.5;overflow:auto;max-height:45vh}textarea{min-height:410px;resize:vertical;background:#fffefa}pre{white-space:pre-wrap;background:#faf4e4;color:var(--output);min-height:110px;max-height:45vh;margin-bottom:.75rem}.site-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;color:var(--muted)}.site-footer p{margin:0}.site-footer a{text-decoration:none;font-weight:700}@media (max-width:900px){.grid,.workspace-grid{grid-template-columns:1fr}textarea{min-height:320px}}@keyframes settle{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}