:root{--font-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--hover:color-mix(in srgb, var(--teal) 9%, transparent)}.canvas{-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.canvas text{fill:var(--ink);font-family:var(--font-sans);dominant-baseline:central}.ring{stroke-width:1.6px}.ring-outer{fill:var(--card);stroke:var(--line)}.ring-adapters{fill:var(--slate-soft);stroke:var(--slate)}.ring-application{fill:var(--teal-soft);stroke:var(--teal)}.ring-domainServices{fill:color-mix(in srgb, var(--teal) 22%, var(--teal-soft));stroke:var(--teal)}.ring-domain{fill:var(--teal-deep);stroke:var(--teal-deep)}.canvas .ring-label{fill:var(--muted);letter-spacing:1.6px;text-anchor:middle;font-weight:600}.canvas .ring-label.on-domain{fill:var(--domain-ink)}.canvas .domain-title{fill:var(--domain-ink);text-anchor:middle;font-weight:600}.canvas .ring-subtitle{fill:var(--muted);text-anchor:middle}.guide{stroke:var(--muted);stroke-opacity:var(--guide-opacity);stroke-width:1px;stroke-dasharray:6 5}.canvas .line-name{font-family:var(--font-mono);font-weight:500}.text-button[aria-pressed=true]{background:var(--teal-soft);color:var(--teal)}.canvas .ring-subtitle.on-domain{fill:var(--domain-ink);fill-opacity:.75}.aggregate-outline{fill:none;stroke:var(--domain-ink);stroke-opacity:.5;stroke-width:1.2px}.canvas .line-tag,.canvas .inline-tag{font-family:var(--font-mono);fill:var(--muted)}.canvas .node-domainItem .line-tag,.canvas .node-domainItem .inline-tag,.canvas .node-aggregate .line-tag{fill:var(--domain-ink);fill-opacity:.7}.ring,.node,.edge,.guide,.edge-label,.ring-label,.ring-subtitle,.domain-title,.box{transition:opacity .18s ease-out,fill .18s ease-out,stroke-width .18s ease-out,filter .18s ease-out}@media (prefers-reduced-motion:reduce){.ring,.node,.edge,.guide,.edge-label,.ring-label,.ring-subtitle,.domain-title,.box{transition:none}}.exporting,.exporting *{transition:none!important}.ring:focus-visible{outline:none}svg[data-hover] .edge,svg[data-hover] .edge-label,svg[data-hover] .guide,svg[data-hover] .node:not([data-layer]),svg[data-hover=outer] [data-layer]:not([data-layer=outer]){opacity:.55}svg[data-hover=outer] .ring[data-band=outer]{fill:var(--card-hover);stroke-width:2.2px;filter:url(#glow-outer)}svg[data-hover=outer] .ring-label[data-layer=outer]{fill:var(--ink)}svg[data-hover=outer] .node[data-layer=outer] .box{stroke-width:2px;filter:brightness(1.2)}.glow-outer{flood-color:var(--line)}svg[data-hover=adapters] [data-layer]:not([data-layer=adapters]){opacity:.55}svg[data-hover=adapters] .ring[data-band=adapters]{fill:var(--slate-soft-hover);stroke-width:2.2px;filter:url(#glow-adapters)}svg[data-hover=adapters] .ring-label[data-layer=adapters]{fill:var(--ink)}svg[data-hover=adapters] .node[data-layer=adapters] .box{stroke-width:2px;filter:brightness(1.2)}.glow-adapters{flood-color:var(--slate)}svg[data-hover=application] [data-layer]:not([data-layer=application]){opacity:.55}svg[data-hover=application] .ring[data-band=application]{fill:var(--teal-soft-hover);stroke-width:2.2px;filter:url(#glow-application)}svg[data-hover=application] .ring-label[data-layer=application]{fill:var(--ink)}svg[data-hover=application] .node[data-layer=application] .box{stroke-width:2px;filter:brightness(1.2)}.glow-application{flood-color:var(--teal)}svg[data-hover=domainServices] [data-layer]:not([data-layer=domainServices]){opacity:.55}svg[data-hover=domainServices] .ring[data-band=domainServices]{fill:var(--teal-soft-hover);stroke-width:2.2px;filter:url(#glow-domainServices)}svg[data-hover=domainServices] .ring-label[data-layer=domainServices]{fill:var(--ink)}svg[data-hover=domainServices] .node[data-layer=domainServices] .box{stroke-width:2px;filter:brightness(1.2)}.glow-domainServices{flood-color:var(--teal)}svg[data-hover=domain] [data-layer]:not([data-layer=domain]){opacity:.55}svg[data-hover=domain] .ring[data-band=domain]{fill:var(--teal-deep-hover);stroke-width:2.2px;filter:url(#glow-domain)}svg[data-hover=domain] .ring-label[data-layer=domain]{fill:var(--ink)}svg[data-hover=domain] .node[data-layer=domain] .box{stroke-width:2px;filter:brightness(1.2)}.glow-domain{flood-color:var(--teal-deep)}.affordances{pointer-events:none;position:absolute;inset:0}.plus{border:1px solid var(--teal);background:var(--card);width:24px;height:24px;color:var(--teal);box-shadow:var(--shadow);cursor:pointer;pointer-events:auto;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;transform:translate(-50%,-50%)}.plus .icon{width:14px;height:14px}.plus:hover{background:var(--teal-soft)}.plus-menu{pointer-events:auto;gap:2px;padding:4px;display:grid;position:absolute;transform:translate(-50%,18px)}.plus-menu .text-button{font-family:var(--font-mono);justify-content:start;font-weight:500}.inline-name{z-index:5;min-width:160px;font-family:var(--font-mono);box-shadow:0 0 0 2px var(--teal), var(--shadow);position:absolute;transform:translate(-50%,-50%)}.is-flash{animation:1.2s ease-out flash}@keyframes flash{0%{box-shadow:0 0 0 2px var(--teal);background:var(--teal-soft)}to{box-shadow:0 0 #0000}}@media (prefers-reduced-motion:reduce){.is-flash{outline:2px solid var(--teal);animation:none}}.canvas .svg-legend{display:none}.legend-panel{fill:var(--card);stroke:var(--line)}.canvas .legend-heading{fill:var(--ink);font-weight:600}.canvas .legend-label{fill:var(--muted)}.canvas .legend-tag{font-family:var(--font-mono);fill:var(--muted)}.swatch-outer{fill:var(--card);stroke:var(--line)}.swatch-adapters,.swatch-external{fill:var(--slate-soft);stroke:var(--slate)}.swatch-driven{fill:var(--driven-fill);stroke:var(--driven-line)}.swatch-application{fill:var(--teal-soft);stroke:var(--teal)}.swatch-domainServices{fill:color-mix(in srgb, var(--teal) 22%, var(--teal-soft));stroke:var(--teal)}.swatch-domain{fill:var(--teal-deep);stroke:var(--teal-deep)}.swatch-driving{fill:var(--driving-fill);stroke:var(--driving-line)}.stroke-dashed{stroke:var(--teal);stroke-width:2px;stroke-dasharray:6 4}.stroke-solid{stroke:var(--ink);stroke-width:1.6px}.stroke-dotted{stroke:var(--muted);stroke-width:1.6px;stroke-dasharray:2 3}.canvas .line-strong{font-family:var(--font-mono);font-weight:600}.edge{fill:none;stroke-width:1.6px;stroke-linejoin:round}.edge-import{stroke:var(--ink)}.edge-wiring{stroke:var(--muted);stroke-dasharray:4 4}.edge-declares{stroke:var(--ink);stroke-opacity:.6;stroke-width:1.4px;stroke-dasharray:2 3}.edge-declares.on-domain{stroke:var(--domain-ink);stroke-opacity:.75}.arrow-head{fill:var(--ink)}.canvas .edge-label{fill:var(--muted);text-anchor:middle;paint-order:stroke;stroke:var(--teal-soft);stroke-width:4px;stroke-linejoin:round}.box{stroke-width:1.6px}.tone-driving .box{fill:var(--driving-fill);stroke:var(--driving-line);stroke-width:1px}.tone-driven .box{fill:var(--driven-fill);stroke:var(--driven-line);stroke-width:1px}.canvas .tone-driving text,.canvas .tone-driving tspan{fill:var(--driving-ink)}.canvas .tone-driven text,.canvas .tone-driven tspan{fill:var(--driven-ink)}.tone-slate .box{fill:var(--slate-soft);stroke:var(--slate)}.tone-teal .box{fill:var(--card);stroke:var(--teal)}.node-useCase .box{fill:none;stroke:var(--teal);stroke-width:1.5px}.node-port .box{stroke-width:2.4px;stroke-dasharray:6 4}.node-composition .box{fill:var(--card);stroke:var(--muted);stroke-dasharray:6 4}.canvas .centered{text-anchor:middle}.canvas .end{text-anchor:end}.canvas .node[data-selected]{outline:2px solid var(--teal);outline-offset:3px}svg[data-link-mode] :is(.edge,.edge-label,.guide,.ring-label,.ring-subtitle,.domain-title,.node:not([data-link-target],[data-selected])){opacity:.55}svg[data-link-mode] .node[data-link-target]{outline:1.5px dashed var(--teal);outline-offset:3px;cursor:pointer}svg[data-link-mode] .node[data-link-target] .box{stroke-width:2px;filter:brightness(1.2)}.canvas .node-portLabel text{font-family:var(--font-mono);fill:var(--ink);fill-opacity:.85}.canvas .line-title{font-weight:600}.canvas .line-mono{font-family:var(--font-mono)}.canvas .line-eyebrow{font-family:var(--font-mono);fill:var(--muted)}.canvas .line-muted{fill:var(--muted)}.canvas .line-minor{font-family:var(--font-mono);fill:var(--muted)}.canvas .node-domainItem text,.canvas .node-aggregate text,.canvas .node-note text,.canvas .node-portDecl text{fill:var(--domain-ink)}.canvas .node-domainItem .line-muted,.canvas .node-domainItem .line-minor{fill:var(--domain-ink);fill-opacity:.75}.canvas .node-note .line-mono{font-weight:500}.canvas .diagram-title{font-weight:600}.canvas .diagram-subtitle{fill:var(--muted)}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font:13px/1.4 var(--font-sans);overflow:hidden}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--teal);outline-offset:1px}.stage{background-color:var(--bg);background-image:radial-gradient(circle, var(--line) 1px, transparent 1.4px);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}.stage.is-dragging{cursor:grabbing}.stage.is-fullscreen{z-index:20}.island{z-index:10;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);cursor:auto;border-radius:8px;padding:8px;position:fixed}.icon{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}.icon-button,.text-button,.zoom-level{height:32px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;place-items:center;display:inline-grid}.icon-button{flex:none;width:32px;padding:0}a.icon-button{color:inherit;text-decoration:none}.icon-button.small{width:26px;height:26px}.text-button{padding:0 8px;font-size:12px;font-weight:600}.icon-button:hover,.text-button:hover,.zoom-level:hover{background:var(--hover)}label.icon-button:focus-within,label.tool:focus-within{outline:2px solid var(--teal);outline-offset:1px}.tool{height:32px;color:inherit;font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;align-items:center;gap:6px;padding:0 10px 0 8px;font-size:13px;display:inline-flex}.tool:hover{background:var(--hover)}.example-picker{position:relative}.example-picker select{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.toolbar{scrollbar-width:none;align-items:center;gap:4px;max-width:calc(100vw - 24px);padding:4px 6px;display:flex;top:12px;left:50%;overflow-x:auto;transform:translate(-50%)}.wordmark{font:600 16px/1 var(--font-mono);color:var(--teal);white-space:nowrap;margin:0 6px 0 4px}.kinds{border:0;gap:2px;margin:0;padding:0;display:flex}.kind input{opacity:0;pointer-events:none;position:absolute}.kind span{cursor:pointer;white-space:nowrap;border-radius:6px;padding:7px 10px;display:block}.kind span:hover{background:var(--hover)}.kind input:checked+span{background:var(--teal-soft);color:var(--teal);font-weight:600}.kind input:focus-visible+span{outline:2px solid var(--teal);outline-offset:1px}.divider{background:var(--line);flex:none;width:1px;height:20px;margin:0 4px}.export{flex:none;align-items:center;gap:6px;padding-left:4px;display:inline-flex}.export-label{color:var(--muted);font-size:13px}.segmented{border:1px solid var(--line);border-radius:8px;display:inline-flex;overflow:hidden}.segmented .text-button{height:28px;color:var(--ink);border-radius:0;font-size:13px}.segmented .text-button+.text-button{border-left:1px solid var(--line)}.editor{flex-direction:column;width:300px;max-height:calc(100dvh - 138px);padding:0;display:flex;top:72px;left:12px}.editor-head{flex:none;justify-content:space-between;align-items:center;padding:6px 6px 6px 14px;display:flex}.editor h2{margin:0;font-size:13px;font-weight:600}.editor-body{overscroll-behavior:contain;flex:1;min-height:0;padding:0 10px 16px;overflow-y:auto}.editor-body[hidden]{display:none}.section{border-top:1px solid var(--line);padding:12px 2px;position:relative}.fold>:not(summary),.fold>.field+.field{margin-top:8px}.section-head{cursor:pointer;align-items:center;gap:6px;min-height:28px;padding-right:34px;list-style:none;display:flex}.section-head::-webkit-details-marker{display:none}.section-head .icon{width:14px;height:14px;color:var(--muted);transition:transform .15s}.fold[open]>.section-head .icon{transform:rotate(90deg)}.section-head .count{color:var(--muted);font-size:12px}.section-actions{gap:2px;display:flex;position:absolute;top:12px;right:2px}.section-actions .text-button.small{height:26px;padding:0 8px;font-size:12px}.port-group{gap:6px;display:grid}.port-group h3{color:var(--muted);margin:4px 2px 0;font-size:12px;font-weight:600}@media (prefers-reduced-motion:reduce){.section-head .icon{transition:none}}.items{gap:6px;margin:0;padding:0;list-style:none;display:grid}.item{background:var(--hover);border-radius:6px;grid-template-columns:1fr auto;align-items:center;gap:6px;padding:6px;display:grid}.item>.field,.item>.note{grid-column:1/-1}.item.layer{border:0;grid-template-columns:1fr;margin:0}.item.layer legend{float:left;padding:0;font-size:12px;font-weight:600}.field{gap:3px;display:grid}.field>span,.note summary,.empty{color:var(--muted);font-size:12px}.empty{margin:0}input,select,textarea{border:1px solid var(--line);background:var(--bg);min-width:0;color:inherit;font:inherit;border-radius:6px;padding:5px 8px}input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-soft);outline:none}select{appearance:none;background-image:var(--chevron);background-position:right 10px center;background-repeat:no-repeat;background-size:12px;padding-right:28px}.item .name{font-family:var(--font-mono);font-size:12.5px}textarea{resize:vertical;width:100%;margin-top:4px}.note summary{cursor:pointer;width:fit-content}.zoom{align-items:center;gap:2px;padding:4px;display:flex;bottom:12px;left:12px}.zoom-level{font-variant-numeric:tabular-nums;min-width:52px;font-size:12px}.notice{gap:6px;width:min(380px,100vw - 24px);padding:10px 12px;display:grid;top:72px;right:12px}.notice p{margin:0}.notice-error{box-shadow:inset 3px 0 0 var(--error), var(--shadow)}.notice ul{max-height:200px;font:12px/1.5 var(--font-mono);margin:0;padding-left:18px;overflow-y:auto}.notice-actions{justify-content:flex-end;align-items:center;gap:4px;display:flex}.link-chip{border:1px solid var(--teal);background:var(--card);height:24px;color:var(--teal);font:inherit;white-space:nowrap;box-shadow:var(--shadow);cursor:pointer;border-radius:12px;padding:0 10px;font-size:12px;font-weight:600;position:absolute;transform:translate(4px,calc(-100% - 2px))}.link-chip:hover{background:var(--teal-soft)}.toast{align-items:center;gap:4px;max-width:min(420px,100vw - 32px);padding:4px 4px 4px 14px;font-size:13px;transition:opacity .15s ease-in,transform .15s ease-in;animation:.15s ease-out toast-in;display:flex;bottom:20px;left:50%;transform:translate(-50%)}.toast p{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;margin:0 8px 0 0;overflow:hidden}.toast .text-button{color:var(--teal);font-size:13px}.toast.is-leaving{opacity:0;transform:translate(-50%,8px)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}}@media (prefers-reduced-motion:reduce){.toast{transition:none;animation:none}}.legend{width:max-content;max-width:280px;padding:4px;bottom:12px;right:12px}.legend[data-open]{width:260px}.legend-head{width:100%;height:32px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:6px;padding:0 8px;font-size:13px;font-weight:600;display:flex}.legend-head:hover{background:var(--hover)}.legend-head .icon:first-child{color:var(--teal)}.legend-head .icon:last-child{width:14px;height:14px;color:var(--muted);margin-left:auto;transition:transform .15s;transform:rotate(-90deg)}.legend[data-open] .legend-head .icon:last-child{transform:rotate(90deg)}.legend-body{grid-template-rows:0fr;transition:grid-template-rows .15s;display:grid}.legend[data-open] .legend-body{grid-template-rows:1fr}.legend:not([data-open]) .legend-body{width:0}.legend-inner{gap:12px;min-height:0;padding:0 8px;display:grid;overflow:hidden}.legend[data-open] .legend-inner{max-height:calc(100dvh - 160px);padding-top:6px;overflow-y:auto}.legend-section{gap:6px;display:grid}.legend h3{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:11px;font-weight:600}.legend ul{color:var(--muted);gap:6px;margin:0;padding:0;font-size:12px;list-style:none;display:grid}.legend li{align-items:center;gap:8px;display:flex}.legend-swatch{border:1px solid;border-radius:2px;width:16px;height:10px;display:inline-block}span.swatch-outer{background:var(--card);border-color:var(--line)}span.swatch-adapters{background:var(--slate-soft);border-color:var(--slate)}span.swatch-application{background:var(--teal-soft);border-color:var(--teal)}span.swatch-domainServices{background:color-mix(in srgb, var(--teal) 22%, var(--teal-soft));border-color:var(--teal)}span.swatch-domain{background:var(--teal-deep);border-color:var(--teal-deep)}span.swatch-driving{background:var(--driving-fill);border-color:var(--driving-line)}span.swatch-driven{background:var(--driven-fill);border-color:var(--driven-line)}span.swatch-external{background:var(--slate-soft);border-color:var(--slate)}.legend-line{flex:none}.legend-tags{font-family:var(--font-mono)}.legend-footer{border-top:1px solid var(--line);padding:8px 0}.legend-export{align-items:center;gap:6px;font-size:12px;display:flex}@media (prefers-reduced-motion:reduce){.legend-body,.legend-head .icon:last-child{transition:none}}@media (width<=720px){.toolbar{max-width:none;top:8px;left:8px;right:8px;transform:none}.editor{width:auto;max-height:45dvh;inset:auto 8px 8px}.zoom{inset:60px 8px auto auto}.notice{top:108px;right:8px}.toast{top:108px;bottom:auto}.tool{padding:0 8px}.tool-text{display:none}.legend{top:108px;bottom:auto;right:8px}}