:root{color-scheme:dark;--bg:#131619;--panel:#1b1f22;--line:#2b3033;--text:#e4e8e6;--muted:#8e989b;--mint:#b4e9d2;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;font-family:Inter,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:13px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,a{ -webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--mint);outline-offset:-3px}button:hover{color:#fff}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}h1,h2,h3,p{margin:0}.app-shell{height:100dvh;min-height:650px;display:grid;grid-template-columns:56px 225px minmax(300px,1fr) 265px;grid-template-rows:60px minmax(0,1fr) 30px;grid-template-areas:"header header header header" "activity explorer workspace inspector" "footer footer footer footer";overflow:hidden}.topbar{grid-area:header;display:flex;align-items:center;gap:18px;padding:0 22px 0 16px;border-bottom:1px solid var(--line);background:#1d2124}.brand{display:flex;gap:10px;align-items:center;letter-spacing:-.7px;font-size:19px}.brand strong{font-weight:650}.brand span{font-weight:400;color:#aeb7b6}.top-divider{height:21px;width:1px;background:#3a3f42;margin:0 2px 0 8px}.project-name{font-size:12px;color:#a6afb0}.tag{font-size:10px;border:1px solid #3a4140;padding:3px 6px;color:#b8c2be;border-radius:4px}.top-actions{margin-left:auto;display:flex;gap:20px;align-items:center}.server-status{font-size:11px;color:#a1aaa7;display:flex;align-items:center;gap:7px}.server-status i{width:6px;height:6px;background:#89918e;border-radius:50%}.server-status.online i{background:#a5dcb8}.server-status.offline i{background:#dfb277}.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;background:#242b2e;border:1px solid #3a4445;padding:10px 15px;border-radius:6px;font-size:12px;font-weight:550;transition:background .15s}.button:hover{background:#30393a}.button.small{font-size:11px;padding:7px 10px;gap:7px}.button.small svg{width:14px;height:14px}.button.primary{background:var(--mint);border-color:var(--mint);color:#1c3b30;padding:11px 18px}.button.primary:hover{background:#c9f6e3}.button.wide{width:100%;justify-content:space-between}.button svg{width:15px;height:15px}.activitybar{grid-area:activity;background:#171b1e;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding-top:16px;gap:15px}.activity{position:relative;width:38px;height:38px;display:grid;place-items:center;color:#7e898c;border-radius:7px}.activity:hover{background:#242b2d;color:#c6d3cd}.activity.active{color:var(--mint);background:#293934}.activity.active:before{content:"";position:absolute;left:-9px;height:21px;width:2px;background:var(--mint);border-radius:1px}.activity svg{width:20px;height:20px}.activity-spacer{flex:1}.version{font:10px var(--mono);color:#6e797c;padding:0 0 20px}.pane{background:var(--panel)}.explorer{grid-area:explorer;border-right:1px solid var(--line);display:flex;flex-direction:column}.pane-title{height:46px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 17px}.pane h2{font-size:11px;font-weight:600;letter-spacing:.2px}.slot-label{font:9px var(--mono);color:#637176;border:1px solid #323b3d;padding:2px 4px;border-radius:3px}.tree-root{margin:18px 10px 0;padding:10px 8px;display:flex;gap:8px;align-items:center;background:#252c2e;border-radius:4px;font-size:11px;color:#c6cecb}.tree-root svg:first-child{width:10px;height:10px;transform:rotate(90deg);color:#82918b}.tree-root svg:nth-child(2){width:15px;height:15px;color:#a5beb2}.count{font:10px var(--mono);color:#8b9a95;border-radius:4px;background:#303a39;padding:2px 5px}.tree-root .count{margin-left:auto}.explorer-slot{flex:1;min-height:100px;overflow:auto}.empty-small{padding:25px 22px;color:#79878a;font-size:10px;line-height:1.9}.empty-small p{color:#98a3a3;margin-bottom:7px;font-size:10px}.empty-line{display:block;height:21px;width:15px;border-bottom:1px solid #3c4948;border-left:1px solid #3c4948;margin:0 0 17px 3px}.explorer-bottom{margin:0 16px 25px;padding-top:19px;border-top:1px solid var(--line)}.eyebrow{font:9px var(--mono);letter-spacing:1.6px;color:#8d9c99}.explorer-bottom .eyebrow{font-size:8px;letter-spacing:1.25px}.explorer-bottom p{font-size:11px;line-height:1.9;color:#b1bdb9;margin:12px 0}.text-button{display:inline-flex;align-items:center;gap:10px;font-size:10px;color:var(--mint);padding:4px 0}.text-button svg{width:13px;height:13px}.workspace{grid-area:workspace;display:flex;flex-direction:column;min-width:0;min-height:0;background:#14191c}.workspace-toolbar{height:46px;border-bottom:1px solid var(--line);display:flex;align-items:stretch;background:#1a1e21;flex-shrink:0}.tablist{display:flex}.tab{padding:0 18px;display:flex;align-items:center;gap:8px;border-right:1px solid var(--line);color:#8e9a9d;font-size:11px;position:relative}.tab svg{width:14px;height:14px}.tab.active{background:#151b1e;color:#d5dfda}.tab.active:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--mint)}.tab-dot{display:block;width:4px;height:4px;border-radius:50%;background:#73827d;margin-left:14px}.icon-button{width:32px;height:32px;display:grid;place-items:center;color:#8f9b9c;border-radius:5px}.icon-button:hover{background:#2b3336}.layout-button{margin:auto 12px auto auto}.layout-button svg{width:16px;height:16px}.canvas{position:relative;flex:1;min-height:290px;display:flex;flex-direction:column;background-image:radial-gradient(#2c3539 .7px,transparent .7px);background-size:23px 23px;background-position:center}.canvas-caption{display:flex;gap:10px;align-items:center;padding:22px 25px;font:9px var(--mono);letter-spacing:.7px;color:#8d9c9c}.canvas-caption span:last-child{color:#54645f;margin:0 2px}.caption-dot{height:5px;width:5px;background:#b4e9d2;border-radius:50%;box-shadow:0 0 8px #b4e9d21a}.viewport-slot{flex:1;display:flex;position:relative;min-height:0}.canvas-empty{margin:auto;text-align:center;padding:12px 20px 32px}.workspace-graphic{width:105px;height:90px;position:relative;margin:0 auto 25px}.graphic-back{width:61px;height:61px;border:1px solid #3a5149;border-radius:12px;position:absolute;top:0;left:12px;transform:rotate(-12deg);background:#192421}.graphic-front{width:66px;height:66px;border:1px solid #597d6c;border-radius:13px;position:absolute;top:10px;left:27px;transform:rotate(8deg);display:grid;place-items:center;background:linear-gradient(145deg,#304139,#202d29);box-shadow:0 10px 35px #0004;color:#add9c2}.graphic-front svg{width:33px;height:33px;transform:rotate(-8deg);stroke-width:1.1}.graphic-plus{position:absolute;right:-1px;top:0;border:1px solid #495e52;background:#2f453a;width:23px;height:23px;border-radius:6px;font-size:19px;line-height:19px;color:#b4e9d2}.canvas-empty .eyebrow{color:#8aa89a;font-size:8px;letter-spacing:1.8px;margin-bottom:15px}.canvas h1{font-size:27px;letter-spacing:-1.2px;font-weight:500;color:#e0e9e2;line-height:1.4}.canvas-empty p{margin:16px 0 24px;font-size:12px;line-height:1.9;color:#91a09f}.canvas-note{display:block;font-size:9px;color:#81918d;margin-top:16px}.canvas-bottom{display:flex;justify-content:space-between;padding:0 22px 19px;font:8px var(--mono);color:#7e908b;letter-spacing:1px}.canvas-bottom span:first-child{display:flex;align-items:center;gap:8px}.canvas-bottom svg{height:12px;width:12px}.canvas-bottom span:last-child{letter-spacing:0;font-family:inherit;color:#788782}.output{height:180px;border-top:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0}.output-heading{height:39px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid #242d30}.output-heading>div{display:flex;gap:8px;align-items:center}.output-heading svg{height:14px;width:14px;color:#899996}.output-heading .count{font-size:8px;background:#2b3334;margin-left:3px}.quiet{color:#929e9d}.output-slot{flex:1;overflow:auto;padding:14px 20px 0}.log-line{display:flex;align-items:baseline;gap:13px;margin-bottom:10px;font:10px var(--mono);line-height:1.5}.log-time{color:#73807f}.log-level{font-size:8px;color:#a9d7bd;border:1px solid #3a5144;padding:1px 4px;border-radius:3px}.log-level.error{color:#ecc2a0;border-color:#785f47}.log-message{color:#b3bfbb;overflow-wrap:anywhere}.output-footnote{padding:7px 20px;font-size:9px;color:#73837d}.inspector{grid-area:inspector;border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:auto}.inspector-slot{flex:1;min-height:220px;display:flex;flex-direction:column}.properties-empty{text-align:center;padding:45px 14px 35px}.outlined-icon{height:38px;width:38px;border:1px solid #394341;border-radius:9px;display:grid;place-items:center;color:#81968c;margin:0 auto 17px}.outlined-icon svg{height:19px;width:19px}.properties-empty h3{font-weight:500;font-size:12px;color:#b0beb7}.properties-empty p{font-size:10px;line-height:1.9;margin-top:12px;color:#83928e}.connection-card{border:1px solid #36413c;border-radius:8px;margin:0 16px 20px;padding:16px;background:linear-gradient(145deg,#242e28,#202625)}.connection-card .eyebrow{font-size:8px;letter-spacing:1.3px;color:#96ad9e}.connection-title{display:flex;align-items:center;margin-top:17px;gap:8px}.connection-title svg{color:#b5d6c2;width:18px;height:18px}.connection-title h3{font-size:15px;font-weight:500}.neutral-dot{margin-left:auto;width:5px;height:5px;background:#809188;border-radius:50%}.connection-card>p{font-size:11px;line-height:1.9;color:#a5b5ab;margin:11px 0 19px}.connection-meta{display:flex;justify-content:space-between;font-size:9px;margin-bottom:10px;gap:5px}.connection-meta span:first-child{color:#8e9e93}.connection-meta span:last-child{color:#bdc9c1}.connection-card .button{margin-top:11px;font-size:10px;background:#303d35;border-color:#485c4e;color:#d0e1d4;padding:9px 11px}.connection-card .button:hover{background:#3a4a40}.module-summary{border-top:1px solid var(--line);margin:0 16px;padding:20px 0;display:flex;align-items:center;gap:11px}.summary-icon{height:29px;width:29px;display:grid;place-items:center;border:1px solid #333e3b;border-radius:6px;color:#879a90}.summary-icon svg{width:15px;height:15px}.module-summary div{display:flex;flex-direction:column;gap:5px}.module-summary strong{font-size:10px;font-weight:500;color:#bdc9c3}.module-summary div>span{font-size:9px;color:#82918a}.statusbar{grid-area:footer;border-top:1px solid #303a35;background:#202923;display:flex;align-items:center;gap:20px;padding:0 14px;font-size:9px;color:#97b5a3}.statusbar>span{display:flex;gap:8px;align-items:center}.status-square{width:5px;height:5px;background:#9fd1b1}.statusbar>div{flex:1}.statusbar button{font-size:9px;color:#b4cabb;display:flex;gap:8px;align-items:center}.statusbar svg{height:12px;width:12px}.editor-panel{background-image:linear-gradient(90deg,#25332d14 1px,transparent 1px);background-size:64px}.editor-symbol{font:36px var(--mono);color:#a8c6b5;margin:10px 0 35px}.app-shell.panels-hidden{grid-template-columns:56px 0 minmax(300px,1fr) 0}.panels-hidden .explorer,.panels-hidden .inspector{visibility:hidden;overflow:hidden}dialog{width:min(680px,calc(100% - 32px));max-height:85dvh;padding:27px;background:#1c2326;border:1px solid #45514c;color:var(--text);border-radius:12px;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#080d10bb;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:23px}.dialog-top h2{font-weight:500;font-size:23px;letter-spacing:-.6px;margin-top:10px}.dialog-intro{font-size:12px;line-height:1.9;color:#a7b6af;margin-bottom:22px}.slot-row{display:grid;grid-template-columns:30px 100px 1fr;gap:8px;align-items:center;border-top:1px solid #344039;padding:14px 0}.slot-number{font:10px var(--mono);color:#6e8a7b}.slot-name{font-size:12px;color:#d3dfd7}.slot-desc{font-size:10px;color:#9bada2}.slot-code{font:10px var(--mono);display:block;margin-top:5px;color:#b4e0c8}.dialog-note{background:#26352d;border:1px solid #3c5747;color:#accdb9;padding:13px 15px;border-radius:6px;font-size:11px;line-height:1.8;margin-top:20px}.guide-step{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}.step-index{font:10px var(--mono);display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border:1px solid #445c4e;color:#b4e9d2;border-radius:50%}.guide-step h3{font-size:12px;font-weight:500;line-height:24px}.guide-step p{font-size:11px;color:#9eafa4;line-height:1.8;margin-top:4px}.code-block{position:relative;margin-top:12px;background:#11191a;border:1px solid #33423a;border-radius:6px;padding:17px;overflow:auto;font:10px/1.9 var(--mono);color:#bdd9ca;white-space:pre;tab-size:2}.code-caption{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font:10px var(--mono);color:#92a79a}.network-flow{display:flex;align-items:center;gap:12px;padding:20px 12px;background:#161e20;border-radius:7px;border:1px solid #33433a;font-size:11px;color:#b7cdbf;justify-content:center}.network-flow svg{width:14px;color:#7e9e8c}.doc-link{display:inline-block;color:var(--mint);text-decoration:underline;text-underline-offset:3px;margin-top:17px;font-size:11px}.dialog-subheading{margin:22px 0 11px;font-weight:500;font-size:12px}.connection-live{font-size:11px;line-height:1.9;color:#b5c7bb}.connection-live code{font-size:10px;overflow-wrap:anywhere}#toast{position:fixed;bottom:49px;left:50%;transform:translateX(-50%);padding:11px 18px;background:#d5efdf;color:#1d3a29;border-radius:7px;box-shadow:0 4px 20px #0005;font-size:12px;z-index:5}noscript{position:fixed;inset:0;background:#18211d;padding:40px;font-size:20px}@media(min-width:1500px){.app-shell{grid-template-columns:60px 250px minmax(300px,1fr) 285px}.canvas h1{font-size:32px}.canvas-empty p{font-size:13px}.canvas-empty{padding-bottom:50px}.output{height:200px}}@media(max-width:1100px){.app-shell{grid-template-columns:50px 190px minmax(300px,1fr) 225px}.connection-card{margin:0 12px 16px;padding:12px}.topbar{gap:12px}.server-status{display:none}.tab{padding:0 12px}.canvas h1{font-size:24px}.canvas-empty .eyebrow{font-size:7px;letter-spacing:1.4px}.explorer-bottom{margin:0 12px 20px}.module-summary{margin:0 12px}.project-name{font-size:11px}}@media(max-width:900px){.app-shell{grid-template-columns:50px 190px minmax(300px,1fr);grid-template-areas:"header header header" "activity explorer workspace" "footer footer footer"}.inspector{display:none}.app-shell.panels-hidden{grid-template-columns:50px 0 minmax(300px,1fr)}.tag{display:none}.top-actions{gap:8px}}@media(max-width:620px){.app-shell{min-height:700px;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"header header" "activity workspace" "footer footer";grid-template-rows:56px minmax(0,1fr) 30px}.explorer{display:none}.project-name,.top-divider{display:none}.topbar{padding:0 12px;gap:8px}.brand{font-size:17px;gap:8px}.brand img{width:24px;height:24px}.top-actions .button{padding:7px}.top-actions .button span{display:none}.activitybar{gap:12px}.activity{width:32px;height:34px}.activity.active:before{left:-6px}.canvas h1{font-size:22px}.canvas-empty{padding:15px 10px 24px}.canvas-empty p{font-size:11px}.canvas-caption{padding:18px 15px;font-size:8px}.canvas-bottom{padding:0 15px 16px;font-size:7px}.canvas-note{font-size:8px}.output{height:170px}.output-slot{padding:12px}.log-line{gap:8px;font-size:9px;flex-wrap:wrap}.log-message{flex-basis:100%;margin-left:0}.output-footnote{font-size:8px;padding:7px 12px}.tab{font-size:10px;gap:6px;padding:0 11px}.tab-dot{display:none}.layout-button{display:none}.statusbar{padding:0 10px;gap:12px;font-size:8px}.statusbar button{font-size:0;gap:0}.status-desktop{display:none!important}.statusbar svg{height:13px;width:13px}.app-shell.panels-hidden{grid-template-columns:44px minmax(0,1fr)}dialog{padding:20px}.slot-row{grid-template-columns:22px 80px 1fr}.slot-desc{font-size:9px}.network-flow{font-size:9px;gap:7px}.dialog-top h2{font-size:21px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.next-guide{margin-top:20px}.mounted-module{width:100%;height:100%;min-height:0;overflow:auto}