@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--bg-0: #081120;--bg-1: #10213e;--bg-2: #19335d;--text: #eef5ff;--muted: #b5c5dc;--ok: #23d18b;--warn: #ff9f40;--danger: #ff5e7a;--card: rgba(14, 27, 50, .78);--outline: rgba(213, 233, 255, .2)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Space Grotesk,sans-serif;color:var(--text);position:relative;overflow-x:hidden;background:radial-gradient(circle at 12% -10%,#3277ff 0%,transparent 35%),radial-gradient(circle at 84% 120%,#42b883 0%,transparent 28%),linear-gradient(145deg,var(--bg-0),var(--bg-1) 42%,var(--bg-2))}body:before,body:after{content:"";position:fixed;width:42vmax;height:42vmax;border-radius:50%;filter:blur(64px);z-index:-1;pointer-events:none;opacity:.35}body:before{background:radial-gradient(circle,rgba(58,128,255,.55),transparent 60%);top:-12vmax;right:-10vmax;animation:driftA 16s ease-in-out infinite}body:after{background:radial-gradient(circle,rgba(35,209,139,.45),transparent 62%);bottom:-16vmax;left:-12vmax;animation:driftB 19s ease-in-out infinite}#root{min-height:100vh}.app-shell{max-width:1300px;margin:0 auto;padding:1.2rem;display:grid;gap:1rem;perspective:1400px}.topbar{display:flex;justify-content:space-between;align-items:end;gap:1rem}.topbar-actions{display:flex;align-items:center;gap:.65rem}.ws-badge{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:.28rem .55rem;border:1px solid var(--outline)}.ws-connected{color:#8dfac7;border-color:#23d18bb3;background:#1a674959}.ws-connecting{color:#ffe199;border-color:#ff9f40b3;background:#754d1659}.ws-no-session{color:#cde0ff;border-color:#91baffb3;background:#24407059}.ws-disconnected,.ws-error{color:#ffc4cf;border-color:#ff5e7ab3;background:#75182c59}.topbar h1{margin:0;font-size:clamp(1.4rem,2.8vw,2rem)}.topbar p{margin:.35rem 0 0;color:var(--muted)}.topbar a{color:#fff;text-decoration:none;border:1px solid var(--outline);border-radius:999px;padding:.45rem .9rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.ghost-link{color:#fff;border:1px solid var(--outline);border-radius:999px;background:#0e1b32a6;padding:.45rem .9rem}.card{border:1px solid var(--outline);border-radius:14px;background:var(--card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform-style:preserve-3d;transition:transform .3s ease,box-shadow .3s ease,border-color .25s ease;animation:cardRise .52s ease both}.card:hover{transform:translateY(-4px) rotateX(2deg) rotateY(-1deg);border-color:#eef5ff5c;box-shadow:0 18px 38px #040b1c6b}.controls{display:flex;gap:.75rem;align-items:end;padding:.85rem;flex-wrap:wrap;animation-delay:90ms}.control-item{display:grid;gap:.3rem}label{color:var(--muted);font-size:.9rem}select,button,textarea{border-radius:10px;border:1px solid var(--outline);background:#0a162ce6;color:var(--text);font-family:inherit}select,button{padding:.5rem .75rem}button{cursor:pointer;transition:transform .12s ease,border-color .2s ease}button:hover:enabled{transform:translateY(-1px);border-color:#ffffff80}button:disabled{opacity:.5;cursor:not-allowed}.workspace{display:flex;align-items:stretch;gap:1rem;min-height:72vh;animation:cardRise .62s ease both;animation-delay:.12s}.board-panel,.code-panel,.log-panel{padding:1rem}.board-panel{flex:0 0 auto;min-width:300px;max-width:78%;overflow:auto;animation-delay:.18s}.right-stack{flex:1 1 auto;min-width:300px;display:flex;flex-direction:column;min-height:72vh}.splitter{border-radius:999px;border:1px solid var(--outline);background:#84a7da38;position:relative;box-shadow:0 0 #5da2ff00;transition:box-shadow .2s ease}.splitter:after{content:"";position:absolute;top:25%;right:25%;bottom:25%;left:25%;border-radius:inherit;background:#e7f1ff26}.splitter-vertical{width:10px;cursor:col-resize;align-self:stretch}.splitter-horizontal{height:10px;cursor:row-resize;width:100%}.splitter:hover{box-shadow:0 0 18px #5da2ff73}.workspace.is-dragging{-webkit-user-select:none;user-select:none}.workspace.is-dragging .splitter{box-shadow:0 0 20px #42b8838c}.code-panel,.log-panel{display:flex;flex-direction:column;overflow:hidden}.code-panel{position:relative;overflow:visible;z-index:3}.log-panel{position:relative;z-index:1}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.panel-title-row h2{margin:0}.panel-actions{display:flex;align-items:center;gap:.5rem}.panel-copy-btn{font-size:.8rem;letter-spacing:.02em;text-transform:uppercase;padding:.38rem .68rem;border-radius:999px}h2{margin:0 0 .75rem}.board-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}.board-meta span{font-size:.82rem;border:1px solid var(--outline);padding:.2rem .5rem;border-radius:999px}.header-layout{border:1px solid var(--outline);border-radius:12px;padding:.75rem;background:#050c1880}.header-layout-title{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}.header-grid{display:grid;gap:.42rem}.header-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.55rem}.pin{text-align:left;display:grid;gap:.15rem;min-height:72px}.pin.high{border-color:#23d18bbf;box-shadow:inset 0 0 0 1px #23d18b33;animation:pinPulse 1.4s ease-in-out infinite}.pin.low{border-color:#ff9f40a6}.pin-empty{cursor:default;background:#1b273e80;border:1px dashed rgba(181,197,220,.35);color:var(--muted);padding:.5rem .65rem;border-radius:10px}.pin-number{font-size:.8rem;color:var(--muted)}.pin-label{font-weight:600;font-size:.92rem}.pin-state{font-size:.76rem;position:relative;overflow:hidden}textarea{width:100%;min-height:180px;height:100%;padding:.8rem;resize:none;font-family:IBM Plex Mono,monospace;font-size:.9rem}.code-editor{flex:1;min-height:220px;border:1px solid var(--outline);border-radius:12px;overflow:hidden}.syntax-status{position:relative;z-index:20;border-radius:999px;width:fit-content;padding:.24rem .62rem;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}.syntax-status[data-tooltip]:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%) translateY(4px);min-width:190px;max-width:360px;padding:.5rem .62rem;border-radius:10px;border:1px solid var(--outline);background:#081326f5;color:var(--text);font-family:IBM Plex Mono,monospace;font-size:.74rem;line-height:1.35;letter-spacing:normal;text-transform:none;white-space:pre-line;opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease;z-index:9999;box-shadow:0 10px 24px #040b1c73}.syntax-status[data-tooltip]:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.syntax-checking{color:#ffe199;border:1px solid rgba(255,159,64,.7);background:#754d164d}.syntax-ok{color:#8dfac7;border:1px solid rgba(35,209,139,.7);background:#1a67494d}.syntax-error{color:#ffc4cf;border:1px solid rgba(255,94,122,.7);background:#75182c4d}.log-panel pre{flex:1;min-height:140px;overflow:auto;padding:.8rem;background:#030a16e0;border-radius:12px;border:1px solid var(--outline);font-family:IBM Plex Mono,monospace;white-space:pre-wrap}.error-banner{border:1px solid rgba(255,94,122,.7);background:#6f1326cc;border-radius:10px;padding:.65rem .8rem}.guide-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#050914a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:20;padding:1rem}.guide-panel{width:min(980px,96vw);max-height:90vh;overflow:hidden;display:grid;grid-template-rows:auto 1fr}.guide-header{padding:.9rem 1rem;border-bottom:1px solid var(--outline);display:flex;align-items:center;justify-content:space-between;gap:.75rem}.guide-header h2{margin:0}.guide-content{overflow:auto;padding:1rem}.guide-content h3{margin:.9rem 0 .4rem}.guide-content p,.guide-content li{color:var(--muted)}.guide-content a{color:#97c2ff}.guide-content pre{margin:.3rem 0;padding:.8rem;border:1px solid var(--outline);border-radius:10px;background:#030a16e0;overflow:auto}@keyframes cardRise{0%{opacity:0;transform:translateY(12px) rotateX(4deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}@keyframes driftA{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(-2.5vmax,2vmax,0) scale(1.08)}}@keyframes driftB{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(2vmax,-2.2vmax,0) scale(1.06)}}@keyframes pinPulse{0%,to{box-shadow:inset 0 0 0 1px #23d18b33,0 0 #23d18b1a}50%{box-shadow:inset 0 0 0 1px #23d18b59,0 0 18px #23d18b38}}@media (max-width: 1080px){.workspace{flex-direction:column;min-height:0}.board-panel,.right-stack,.code-panel,.log-panel{width:100%!important;max-width:100%;min-height:0;height:auto!important}.right-stack{gap:1rem}.splitter{display:none}textarea{min-height:300px;height:auto}.log-panel pre{min-height:220px}}