:root{--bg:#f3f5f9;--paper:#fff;--ink:#182033;--muted:#697386;--line:#dce1ea;--blue:#335cff;--blue2:#eaf0ff;--mint:#16a889;--purple:#7455d9;--warn:#f4a524;--red:#e15065;--shadow:0 14px 45px rgba(25,35,60,.08)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Pretendard,"Noto Sans KR",system-ui,sans-serif}.topbar{height:70px;padding:0 max(24px,calc((100% - 1440px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(255,255,255,.9);backdrop-filter:blur(14px);position:sticky;top:0;z-index:5}.brand,.status,.agent header,.panel header,.skill-card,.dropzone{display:flex;align-items:center}.brand{gap:11px}.brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:.08em}.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ink);color:#fff;font-weight:900}.status{gap:8px;font-size:13px;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px #16a88918}button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 14px;font-weight:700;color:var(--ink);cursor:pointer;transition:.18s}button:hover:not(:disabled){transform:translateY(-1px);border-color:#aab4c5}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.ghost{padding:7px 10px;background:transparent}.hidden{display:none!important}main{max-width:1440px;margin:auto;padding:0 24px 80px}.intro{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;padding:58px 0 38px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--blue)}h1{font-size:clamp(32px,4vw,55px);line-height:1.08;letter-spacing:-.045em;margin:10px 0 16px}h2{margin:0;font-size:20px;letter-spacing:-.025em}.intro p,.testbench p{color:var(--muted);line-height:1.65;max-width:700px}.progress{display:flex;align-items:center;justify-content:flex-end;padding-bottom:8px}.stage{display:flex;flex-direction:column;align-items:center;gap:6px;color:#9ba3b2;font-size:11px;font-weight:800}.stage b{display:grid;place-items:center;width:29px;height:29px;border:2px solid var(--line);border-radius:50%;background:var(--paper)}.stage.active{color:var(--blue)}.stage.active b{border-color:var(--blue);background:var(--blue);color:#fff}.progress i{width:52px;height:2px;background:var(--line);margin:0 7px 21px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);gap:18px;align-items:center}.agent{background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.agent>header{padding:20px 22px;border-bottom:1px solid var(--line);gap:12px}.agent header p{margin:3px 0 0;color:var(--muted);font-size:12px}.avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#fff;font-weight:900}.avatar.a{background:var(--purple)}.avatar.b{background:var(--blue)}.badge{margin-left:auto;border-radius:999px;background:#edf0f5;padding:5px 9px;font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--muted)}.owner{background:#f1edff;color:var(--purple)}.receiver{background:var(--blue2);color:var(--blue)}.capabilities{display:flex;gap:7px;padding:12px 22px;border-bottom:1px solid var(--line);min-height:49px;flex-wrap:wrap}.capabilities span{background:#f1f3f7;padding:4px 8px;border-radius:6px;font:11px ui-monospace,monospace}.capabilities .private{color:var(--purple);background:#f1edff}.capabilities .imported{color:var(--blue);background:var(--blue2);animation:pop .3s}.skill-card,.dropzone{margin:14px 16px;padding:15px;border:1px solid var(--line);border-radius:13px;gap:10px;min-height:100px}.skill-card>div,.dropzone>div{flex:1}.skill-card small,.dropzone small{display:block;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.12em}.skill-card strong,.dropzone strong{display:block;margin:5px 0;font-size:14px}.skill-card em{color:var(--muted);font-style:normal;font:10px ui-monospace,monospace}.skill-card p,.dropzone p{font-size:11px;color:var(--muted);margin:0}.dropzone.ready{border-color:var(--blue);background:var(--blue2)}.dropzone.enabled{border-color:var(--mint);background:#ecfbf7}.chat{height:285px;overflow:auto;padding:16px;background:#f8f9fb;border-block:1px solid var(--line)}.message{width:max-content;max-width:82%;padding:10px 12px;border-radius:12px;margin-bottom:10px;white-space:pre-line;font-size:13px;line-height:1.5;animation:slide .2s}.message span{display:block;font-size:9px;font-weight:900;letter-spacing:.07em;margin-bottom:3px;opacity:.65}.agent-msg{background:#fff;border:1px solid var(--line)}.user-msg{margin-left:auto;background:var(--ink);color:#fff}.tool-msg{background:#eef4ff;border:1px dashed #9eb3f4;color:#29418e;font-family:ui-monospace,monospace;font-size:11px}.delegate-msg{background:#f3edff;border:1px dashed #a691e1;color:#5a3eae}.composer{display:flex;padding:12px;gap:8px}.composer input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:11px 12px;font:inherit;font-size:13px;outline:none}.composer input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #335cff14}.exchange{display:flex;flex-direction:column;align-items:center;gap:10px}.packet{width:78px;height:92px;border:2px dashed var(--line);border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper);color:var(--muted);transition:.3s}.packet.exported{border-style:solid;border-color:var(--blue);color:var(--blue);box-shadow:0 12px 25px #335cff20;animation:pop .35s}.packet span{font-size:8px;font-weight:900;letter-spacing:.12em}.packet b{font-size:13px}.packet small{font-size:8px;margin-top:5px}.exchange-line{display:flex;align-items:center;width:90px;color:var(--blue)}.exchange-line i{height:2px;background:var(--line);flex:1}.testbench,.observability{margin-top:24px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:23px}.testbench{display:flex;justify-content:space-between;align-items:center;gap:24px}.testbench p{margin:5px 0 0;font-size:13px}.prompts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.prompts button{font-size:12px}.observability{display:grid;grid-template-columns:1fr 1fr;gap:28px}.panel{min-width:0}.panel header{justify-content:space-between;margin-bottom:15px}.panel .badge{margin:0}.empty{padding:35px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center;font-size:12px}.runtime-block{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}.runtime-block b{display:block;background:#f5f6f9;padding:8px 10px;font:10px ui-monospace,monospace}.runtime-block p{padding:0 10px;font-size:11px;color:var(--muted)}.logs{height:215px;overflow:auto;background:#121927;color:#cdd7eb;border-radius:12px;padding:12px;font:11px/1.6 ui-monospace,monospace}.log{display:grid;grid-template-columns:60px 76px 1fr;gap:8px}.log time{color:#75829b}.log b{color:#7f9cff}.log.success b{color:#5bd5b8}.log.warn b{color:#ffc66d}dialog{width:min(760px,calc(100% - 30px));border:0;border-radius:18px;padding:0;box-shadow:0 30px 90px #1118;color:var(--ink)}dialog::backdrop{background:#101522aa;backdrop-filter:blur(5px)}dialog header,dialog footer{display:flex;align-items:center;justify-content:space-between;padding:18px 21px;border-bottom:1px solid var(--line)}dialog footer{border:0;border-top:1px solid var(--line);justify-content:flex-end;gap:9px}dialog pre{margin:0;max-height:60vh;overflow:auto;padding:22px;background:#111827;color:#dbe7ff;font:12px/1.6 ui-monospace,monospace}.icon{border:0;font-size:24px;padding:4px 9px}#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:11px 17px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;font-size:12px;z-index:10}#toast.show{opacity:1;transform:translate(-50%,0)}@keyframes pop{50%{transform:scale(1.05)}}@keyframes slide{from{opacity:0;transform:translateY(5px)}}@media(max-width:1000px){.workspace{grid-template-columns:1fr}.exchange{flex-direction:row;justify-content:center}.exchange-line{width:60px}.observability{grid-template-columns:1fr}.intro{grid-template-columns:1fr}.progress{justify-content:flex-start}.testbench{align-items:flex-start;flex-direction:column}.prompts{justify-content:flex-start}}@media(max-width:600px){main{padding-inline:12px}.topbar{padding-inline:14px}.status{font-size:0}.workspace{gap:12px}.intro{padding-top:35px}.progress i{width:22px}.testbench,.observability{padding:16px}.prompts{display:grid;width:100%}.prompts button{text-align:left}.chat{height:250px}}
