:root{
  --ink:#000;
  --red:#E8341C;
  --paper:#fff;
  --rule:3px;
  --bar-h:60px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:#FAFAFA;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
}

/* ---------- stage ---------- */
.stage{
  position:relative;
  height:100dvh;
  padding-top:60px;
  overflow:hidden;
}
.canvas-editor-watermark{position:absolute;inset:0;z-index:8;pointer-events:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.canvas-editor-watermark[hidden]{display:none}
.canvas-editor-watermark span{position:absolute;color:#000;font:900 clamp(18px,2vw,28px)/1 Archivo,sans-serif;letter-spacing:0;opacity:.07;text-shadow:0 1px 2px rgba(255,255,255,.75);white-space:nowrap;transform:translate(-50%,-50%)}
/* Alternative visual under consideration: transform:translate(-50%,-50%) rotate(-14deg); */
.canvas-editor-watermark span:nth-child(1){left:25%;top:28%}
.canvas-editor-watermark span:nth-child(2){left:70%;top:35%}
.canvas-editor-watermark span:nth-child(3){left:43%;top:63%}
.canvas-editor-watermark span:nth-child(4){left:78%;top:78%}
@media(max-width:768px){.canvas-editor-watermark span{font-size:17px}.canvas-editor-watermark span:nth-child(1){left:28%;top:30%}.canvas-editor-watermark span:nth-child(2){left:72%;top:42%}.canvas-editor-watermark span:nth-child(3){left:38%;top:62%}.canvas-editor-watermark span:nth-child(4){left:76%;top:80%}}
.canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:default;
}
.canvas.is-panning{cursor:grabbing}
.canvas.mode-move{cursor:grab}.canvas.mode-move.is-dragging{cursor:grabbing}
.canvas.mode-connect{cursor:crosshair}.canvas.mode-connect .node{cursor:crosshair}
.canvas.mode-move .node,.canvas.mode-move .edge{cursor:grab}
.canvas.mode-move.is-dragging .node,.canvas.mode-move.is-dragging .edge{cursor:grabbing}
.canvas.cursor-node{cursor:grab}
.canvas.cursor-band,.canvas.cursor-link,.canvas.cursor-rubber{cursor:crosshair}
.canvas.cursor-node.is-dragging{cursor:grabbing}
.canvas.cursor-pan{cursor:grab}.canvas.cursor-pan.is-dragging{cursor:grabbing}

/* ---------- edges ---------- */
.edge-hit{stroke:transparent;stroke-width:22;fill:none}
.edge-line{stroke:var(--ink);stroke-width:2.5;fill:none}
.edge{cursor:grab}
.edge.is-dragging{cursor:grabbing}
.edge:hover .edge-line{stroke:var(--red)}
.edge.is-selected .edge-line{stroke:var(--red);stroke-width:2.6}
.edge.is-dragging .edge-line{stroke:var(--red)}
.group-box{fill:#fff;fill-opacity:.72;stroke:#000;stroke-width:2;stroke-dasharray:8 6;pointer-events:auto;cursor:move}.group-label{font:700 13px Archivo,sans-serif;fill:#000;pointer-events:auto;cursor:move}.chart-text{font-family:Archivo,sans-serif;cursor:move;paint-order:stroke;stroke:#fff;stroke-width:5}.chart-text.is-selected{fill:var(--red)}
.edge-label{
  font-family:Archivo,sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  fill:var(--ink);
  stroke:var(--paper);
  stroke-width:6;
  paint-order:stroke;
  pointer-events:none;
}
.edge.is-selected .edge-label{display:none}
.link-preview{stroke:var(--red);stroke-width:2.5;stroke-dasharray:7 6;fill:none;pointer-events:none}
.selection-box{fill:#E8341C;fill-opacity:.08;stroke:#E8341C;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.snap-guide{stroke:#E8341C;stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;pointer-events:none}

/* ---------- nodes ---------- */
.node{cursor:move}
.node-disc{vector-effect:non-scaling-stroke}
.node-selection-ring{fill:none;stroke:#E8341C;stroke-width:2;vector-effect:non-scaling-stroke}
.node-name{
  font-family:Archivo,sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  fill:var(--ink);
  stroke:var(--paper);
  stroke-width:5;
  paint-order:stroke;
  pointer-events:none;
}
.node-name.is-unnamed{fill:#999}
.node-initial{font-family:Archivo,sans-serif;font-weight:700;pointer-events:none}
.node-toolbar{position:absolute;z-index:45;transform:translate(-50%,-100%);padding:6px;background:#fff;border:2px solid #000;box-shadow:4px 4px 0 #000;pointer-events:auto}
.node-toolbar[hidden]{display:none}
.node-colors,.node-styles{display:flex;gap:5px;justify-content:center}.node-styles{margin-top:6px}
.node-toolbar button{display:flex;align-items:center;justify-content:center;padding:0;background:#fff;border:1px solid #000;cursor:pointer}
.node-colors button{width:20px;height:20px;border-radius:50%;background:var(--swatch);border-color:var(--swatch)}.node-colors button:nth-child(1){--swatch:#000}.node-colors button:nth-child(2){--swatch:#1D4ED8}.node-colors button:nth-child(3){--swatch:#047857}.node-colors button:nth-child(4){--swatch:#B45309}.node-colors button:nth-child(5){--swatch:#7C3AED}.node-colors button:nth-child(6){--swatch:#E8341C}.node-colors button.is-active{border:2px solid #E8341C;outline:2px solid #E8341C;outline-offset:1px}
.node-styles button{width:34px;height:48px;position:relative;flex-direction:column;gap:1px}.node-styles button.is-active{border:1px solid #E8341C;outline:2px solid #E8341C;outline-offset:1px}.node-styles svg{display:block;width:34px;height:34px;min-width:34px;min-height:34px;overflow:visible}.node-styles span{font:700 8.5px/1 Archivo,sans-serif;letter-spacing:.06em;color:#767676}
.connection-ghost{pointer-events:none}
.ghost-ring{fill:none;stroke:#E8341C;stroke-width:6;opacity:.14;vector-effect:non-scaling-stroke}
.ghost-line{stroke:#E8341C;stroke-width:1.6;stroke-dasharray:4 4;opacity:.6;vector-effect:non-scaling-stroke}
.ghost-arrow{fill:#E8341C;opacity:.6}
.drop-candidate{fill:none;stroke:#E8341C;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}
/* ---------- inline text editor ---------- */
.editor{
  position:absolute;
  transform:translate(-50%,-50%);
  width:190px;
  font-family:Archivo,sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:7px 8px;
  border:2px solid var(--red);
  background:var(--paper);
  color:var(--ink);
  outline:none;
  z-index:50;
}

/* ---------- edge radial menu ---------- */
.edge-menu{position:absolute;width:0;height:0;z-index:45;pointer-events:none}
.edge-menu[hidden]{display:none}
.edge-menu-button{
  position:absolute;left:0;top:0;width:40px;height:40px;padding:0;
  border:2px solid #000;border-radius:50%;background:#fff;color:#000;
  font:700 18px/1 Archivo,sans-serif;cursor:pointer;pointer-events:auto;
  transform:translate(-50%,-50%) translate(calc(var(--dx) * .88),calc(var(--dy) * .88));
  opacity:0;transition:transform .12s ease-out,opacity .12s linear;
}
.edge-menu-button:hover{background:#000;color:#fff}
.edge-menu-button.is-danger{color:var(--red);border-color:var(--red)}
.edge-menu-button.is-danger:hover{background:var(--red);color:#fff}
.edge-menu-button.edge-straighten{display:none}
.edge-menu.has-bend .edge-straighten{display:block}
.edge-menu:not([hidden]) .edge-menu-button{opacity:1;transform:translate(-50%,-50%) translate(var(--dx),var(--dy))}
@media (prefers-reduced-motion:reduce){.edge-menu-button{transition:none}}

/* ---------- empty state ---------- */
.empty{
  position:absolute;z-index:20;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(430px,calc(100vw - 32px));
  display:flex;flex-direction:column;align-items:center;
  margin:0;text-align:center;
}
.empty[hidden]{display:none}
.empty h2{margin:0;font:900 22px/1.15 Archivo,sans-serif;letter-spacing:.07em;text-transform:uppercase}
.empty>p{margin:10px 0 0;font:500 12px/1.4 Archivo,sans-serif;letter-spacing:.02em}
.starter-choices{display:flex;justify-content:center;gap:8px;margin-top:20px}
.starter-choice{width:58px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:2px solid #000;background:#fff;color:#000;box-shadow:3px 3px 0 #000;cursor:pointer;font-family:Archivo,sans-serif;transition:transform .1s,box-shadow .1s,background .1s,color .1s}
.starter-choice strong{font-size:20px;line-height:1;font-weight:900}.starter-choice span{font-size:7px;line-height:1;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.starter-choice:hover,.starter-choice:focus-visible{background:var(--red);color:#fff;transform:translate(2px,2px);box-shadow:1px 1px 0 #000;outline:none}

.topbar{position:fixed;top:0;left:0;right:0;height:60px;display:grid;grid-template-columns:auto minmax(180px,420px) minmax(0,1fr);align-items:center;gap:16px;padding:0 18px;background:#fff;border-bottom:2px solid #000;z-index:80}
.brand{display:inline-flex;align-items:center;gap:9px;color:#000;font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.04em;font-size:13px;text-transform:uppercase;text-decoration:none}
.brand-mark{display:block;width:34px;height:34px;object-fit:contain;flex:none;transition:transform .14s ease}
.brand:hover .brand-mark{transform:scale(1.06)}
.brand-word{white-space:nowrap}
.brand-c{color:var(--red)}
.chart-title-control{display:flex;min-width:0;flex-direction:column;gap:3px}
.chart-title-meta{display:flex;align-items:baseline;gap:8px;min-width:0}
.chart-title-label{flex:none;font:700 8px/1 Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#777}
.chart-title-row{display:flex;min-width:0;height:31px;border:1px solid #cfcfcf;background:#f7f7f7}
.chart-title-input{width:100%;min-width:0;padding:0 7px;border:0;background:#fff;color:#000;font:700 12px/1 Archivo,sans-serif;text-transform:uppercase;outline:none}
.chart-title-row:focus-within{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.topbar-link{height:34px;padding:0 6px;border:0;border-bottom:2px solid transparent;background:none;color:#000;font:700 10px Archivo,sans-serif;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.topbar-link:hover{color:var(--red);border-bottom-color:var(--red)}
.topbar-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;border:1px solid #000;background:#000;color:#fff;padding:0 12px;font:700 10px Archivo,sans-serif;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease,border-color .12s ease}
.topbar-button:hover{background:var(--red);border-color:var(--red)}
.topbar-button:active:not(:disabled){transform:scale(.97)}
.topbar-button:disabled{opacity:.35;cursor:default;pointer-events:none}
.topbar-export{background:#fff;color:#000}
.topbar-export:hover{background:var(--red);color:#fff;border-color:var(--red)}
.topbar-export .dial-label{font-size:10px}
.export-control{position:relative}
.export-chevron{font-size:10px;transition:transform .14s ease}.topbar-export[aria-expanded="true"] .export-chevron{transform:rotate(180deg)}
.export-menu{position:absolute;z-index:95;top:calc(100% + 9px);right:0;width:min(340px,calc(100vw - 24px));padding:6px;background:#fff;border:2px solid #000;box-shadow:6px 6px 0 #000}
.export-menu[hidden]{display:none}
.export-offer{margin:0 0 6px;padding:12px;background:#000;color:#fff}.export-offer strong,.export-offer small{display:block}.export-offer strong{font:900 12px/1.1 Archivo,sans-serif;text-transform:uppercase}.export-offer small{margin:5px 0 10px;color:#ddd;font:500 10px/1.35 Archivo,sans-serif}.export-offer button{width:100%;min-height:34px;border:0;background:#E8341C;color:#fff;font:900 9px/1 Archivo,sans-serif;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}.export-offer button:hover,.export-offer button:focus-visible{background:#fff;color:#000;outline:2px solid #E8341C;outline-offset:-2px}.export-offer[hidden]{display:none}
.export-option{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px;border:0;border-bottom:1px solid #ddd;background:#fff;color:#000;text-align:left;cursor:pointer}
.export-option:last-child{border-bottom:0}.export-option:hover,.export-option:focus-visible{background:#f3f3f3;outline:2px solid var(--red);outline-offset:-2px}
.export-format-icon{display:grid;place-items:center;width:40px;height:32px;border:2px solid #000;font:900 9px/1 Archivo,sans-serif;letter-spacing:.04em}
.export-option-copy{display:flex;min-width:0;flex-direction:column;gap:3px}.export-option-copy strong{font:700 11px/1.1 Archivo,sans-serif;text-transform:uppercase;letter-spacing:.03em}.export-option-copy small{font:500 10px/1.25 Archivo,sans-serif;color:#6f6f6f}
.export-plan-badge{padding:3px 4px;border:1px solid var(--red);color:var(--red);font:900 7px/1 Archivo,sans-serif;letter-spacing:.05em}.export-option.is-available .export-plan-badge{display:none}
.export-option.is-locked .export-format-icon{color:#888;border-color:#aaa}.export-option.is-locked .export-option-copy{color:#777}
.topbar-actions{position:relative}
.share-login-lock{display:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.topbar-button.requires-login .share-login-lock{display:block}
.fab{position:fixed;z-index:30;display:flex;flex-direction:column;gap:8px}
.fab-bl{bottom:16px;left:16px}
.fab-bc{bottom:16px;left:50%;transform:translateX(-50%)}
.fab-br{bottom:12px;right:12px}
.fab-btn{width:40px;height:40px;border-radius:50%;border:1px solid #000;background:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s}
.fab-arrange{width:auto;min-width:104px;border-radius:20px;font-size:11px;letter-spacing:.04em}
.export-icon{width:13px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share-icon{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fab-btn:hover{transform:scale(1.08)}
.fab-btn:disabled{opacity:.3;cursor:default;transform:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.tool{position:relative;align-self:flex-start;display:flex;flex-direction:column;background:#fff;border:2px solid #000;user-select:none}
.tool-ind{position:absolute;left:0;right:0;top:0;height:32px;z-index:0;background:#E8341C;transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.tool:not(.is-ready) .tool-ind{transition:none}
.tool.is-move .tool-ind{transform:translateY(32px)}
.tool-btn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:34px;height:32px;padding:0;border:none;background:none;cursor:pointer;color:#8a8a8a;transition:color .16s ease}
.tool-btn.is-on{color:#fff}
.tool-lb{font-family:Archivo,sans-serif;font-weight:700;font-size:7.5px;letter-spacing:.04em;line-height:1;margin-top:2px}
@media (prefers-reduced-motion:reduce){.tool-ind{transition:none}}
.fab-primary{width:48px;height:48px;background:#E8341C;color:#fff;border-color:#E8341C;font-size:22px}
.fab-primary[aria-pressed="true"]{background:#000;border-color:#000}
.add-cluster{z-index:35;gap:8px;align-items:flex-end}
.add-menu-button{position:relative;width:48px;height:48px;background:#fff;border:2px solid #000;border-radius:50%;font-size:0;line-height:0;box-shadow:none}
.add-menu-button::before,.add-menu-button::after{content:"";position:absolute;width:18px;height:2px;background:#000;left:50%;transform:translateX(-50%)}
.add-menu-button::before{box-shadow:0 -6px #000,0 6px #000}
.add-menu-button::after{display:none}
.add-popover{position:absolute;right:0;bottom:112px;display:grid;grid-template-columns:repeat(2,auto);transform-origin:bottom right;border:2px solid #000;background:#fff;opacity:1;transform:scale(1);transition:opacity .14s ease,transform .16s cubic-bezier(.2,.8,.3,1)}
.add-popover[hidden]{display:none;opacity:0;transform:scale(.9);pointer-events:none}
.add-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:76px;padding:12px 10px;border:0;background:#fff;color:#000;font:700 11px/1 Archivo,sans-serif;cursor:pointer}
.add-option:nth-child(1),.add-option:nth-child(3){border-right:1px solid #d8d8d8}
.add-option:nth-child(1),.add-option:nth-child(2){border-bottom:1px solid #d8d8d8}
.add-option svg{width:22px;height:22px;display:block;color:currentColor}
.add-option:hover,.add-option:focus-visible{background:#E8341C;color:#fff;outline:none}
.add-option.is-disabled{color:#aaa;cursor:default}
.add-option.is-disabled:hover,.add-option.is-disabled:focus-visible{background:#fff;color:#aaa}
.add-option-plan{position:absolute;top:5px;right:5px;padding:2px 3px;border:1px solid currentColor;color:#E8341C;background:#fff;font:900 7px/1 Archivo,sans-serif;letter-spacing:.05em}
.add-option.is-disabled .add-option-plan{color:#777}
.add-main-icon{display:block;width:23px;height:23px;position:relative}
.add-person-icon{display:block;width:23px;height:23px;overflow:visible;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.add-relation-icon{display:none;width:32px;height:24px;overflow:visible;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.add-text-icon,.add-group-icon{display:none;width:23px;height:23px;overflow:visible;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.add-group-icon{stroke-dasharray:3 2}
.fab-primary.is-relation .add-main-icon{width:32px;height:24px}
.fab-primary.is-relation .add-person-icon,.fab-primary.is-text .add-person-icon,.fab-primary.is-group .add-person-icon{display:none}
.fab-primary.is-relation .add-relation-icon{display:block}
.fab-primary.is-text .add-text-icon{display:block}
.fab-primary.is-group .add-group-icon{display:block}
.add-badge{position:absolute;right:3px;bottom:3px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#000;color:#fff;font:700 13px/1 Arial,sans-serif}
.save-state{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font:700 8px/1.6 Archivo,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#9a9a9a;transition:color .15s ease}
.save-state.is-error{color:var(--red)}
.chart-picker{flex:0 0 32px;width:32px;display:flex;align-items:center;justify-content:center;border:0;border-left:1px solid #000;background:#fff;color:#000;font:700 14px Archivo,sans-serif;cursor:pointer;padding:0;transition:background .12s ease,color .12s ease}
.chart-picker:hover{background:#000;color:#fff}
.chart-picker[aria-expanded="true"]{background:#000;color:#fff}
.chart-picker span{display:inline-block;transition:transform .16s ease}
.chart-picker[aria-expanded="true"] span{transform:rotate(180deg)}
.chart-menu{position:fixed;top:66px;left:50%;transform:translateX(-50%);z-index:40;width:min(440px,calc(100vw - 32px));padding:14px;background:#fff;border:2px solid #000;box-shadow:6px 6px 0 #000}
.chart-menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:2px solid #000;text-transform:uppercase;letter-spacing:.06em}
.chart-menu-head button,.chart-row-action{border:0;background:none;font:700 10px Archivo,sans-serif;cursor:pointer;letter-spacing:.05em;text-transform:uppercase}
.chart-menu-head button{color:var(--red)}
.chart-list{max-height:50vh;overflow:auto}
.chart-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #ddd}
.chart-row-name{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;border:0;background:none;font:700 13px Archivo,sans-serif;cursor:pointer;text-transform:uppercase}
.chart-row-name:hover{color:var(--red)}
.chart-row-action{color:#666;padding:4px}.chart-row-action:hover{color:#000}.chart-row-action.danger:hover{color:var(--red)}

.dial-label{font-family:Archivo,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.dial-icon{font-size:18px;width:28px;text-align:center}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center}.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.modal-card{position:relative;width:min(320px,calc(100vw - 32px));padding:24px;background:#fff;border:2px solid #000;border-radius:0;box-shadow:6px 6px 0 #000}
.modal-card h2{margin:0 0 12px;font-size:20px;line-height:1.1;text-transform:uppercase;letter-spacing:-.03em}.modal-card p{margin:0;font-size:13px;line-height:1.5}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.modal-actions button{height:38px;padding:0 14px;border:2px solid #000;background:#fff;font:700 11px Archivo,sans-serif;text-transform:uppercase;cursor:pointer}.modal-actions .modal-primary{background:#E8341C;border-color:#E8341C;color:#fff}.modal-actions button:hover{background:#000;color:#fff}.modal-actions .modal-primary:hover{background:#000;border-color:#000}
.upgrade-card{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}.upgrade-card .upgrade-eyebrow{margin:0 0 10px;color:#E8341C;font:700 10px/1 Archivo,sans-serif;letter-spacing:.12em}.upgrade-preview-wrap{margin:16px 0 0;padding:10px;border:2px solid #000;background:#f4f4f4}.upgrade-preview-wrap[hidden]{display:none}.upgrade-preview-wrap img{display:block;width:100%;height:180px;object-fit:contain;background:#fff}.upgrade-preview-wrap figcaption{margin-top:7px;color:#555;font:500 10px/1.35 Archivo,sans-serif}.upgrade-benefits{margin:18px 0 0;padding-left:20px;font-size:12px;line-height:1.7}.upgrade-purchase-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.upgrade-purchase-actions .upgrade-cta{min-height:46px;padding:8px 12px;border:2px solid #E8341C;background:#E8341C;color:#fff;font:900 10px/1.25 Archivo,sans-serif;text-transform:uppercase;cursor:pointer}.upgrade-purchase-actions .upgrade-subscription-cta{background:#000;border-color:#000}.upgrade-purchase-actions .upgrade-cta:hover{background:#fff;color:#000}.upgrade-purchase-actions>a{grid-column:1/-1;justify-self:center;color:#000;font:700 10px/1 Archivo,sans-serif;text-transform:uppercase}.upgrade-dismiss{margin-top:12px}.upgrade-dismiss button{border:0;color:#555}.upgrade-dismiss button:hover{background:none;color:#E8341C}.upgrade-cta[hidden]{display:none}.upgrade-purchase-actions:has(#upgrade-export-cta[hidden]){grid-template-columns:1fr}.upgrade-purchase-actions:has(#upgrade-export-cta[hidden]) #upgrade-compare{grid-column:1}
.share-url{display:flex;gap:8px;margin-top:16px}.share-url input{min-width:0;flex:1;height:38px;border:2px solid #000;padding:0 8px;font:12px Archivo,sans-serif}.share-url button{height:38px;border:2px solid #000;background:#000;color:#fff;padding:0 12px;font:700 11px Archivo,sans-serif;text-transform:uppercase;cursor:pointer}.share-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:20px}.share-actions button{margin:0;border:0;background:none;font:700 11px Archivo,sans-serif;text-transform:uppercase;cursor:pointer;padding:0}.share-update{color:#000}.share-stop{color:#E8341C}.share-actions button:hover{text-decoration:underline}.share-og-error{margin-top:14px!important;color:#E8341C;font-weight:700}
.zoom-controls{position:fixed;top:50%;right:16px;z-index:30;display:flex;flex-direction:column;align-items:stretch;transform:translateY(-50%);border:1px solid #000;background:#fff}.zoom-controls button{width:46px;height:32px;border:0;border-bottom:1px solid #000;background:#fff;color:#000;font:700 16px Archivo,sans-serif;cursor:pointer}.zoom-controls button:last-child{border-bottom:0}.zoom-controls button:hover{background:#E8341C;color:#fff}.zoom-controls #zoom-level{font-size:10px}
@media(max-height:520px){.zoom-controls{top:auto;right:84px;bottom:12px;transform:none;flex-direction:row}.zoom-controls button{width:42px;height:40px;border-right:1px solid #000;border-bottom:0}.zoom-controls button:last-child{border-right:0}}
@media(max-width:820px){.topbar{grid-template-columns:auto minmax(120px,1fr) auto;gap:8px;padding:0 10px}.brand-word{display:none}.topbar-actions{gap:5px}.topbar-link{padding:0 5px}.topbar-button{padding:0 8px}}
@media(max-width:560px){.topbar{height:56px;grid-template-columns:minmax(105px,1fr) auto;padding:0 6px;gap:6px}.brand{display:none}.stage{padding-top:56px}.chart-title-label{font-size:7px}.save-state{font-size:7px}.chart-title-row{height:30px}.topbar-actions{gap:4px}.topbar-button{padding:0 7px}.topbar-button span{display:none}.auth{height:32px;padding:0 10px;font-size:9px}.chart-menu{top:62px}.export-menu{position:fixed;top:64px;left:12px;right:12px;width:auto}}
@media(max-width:420px){.empty h2{font-size:19px}.empty>p{font-size:11px}.starter-choices{gap:5px}.starter-choice{width:52px;height:54px;box-shadow:2px 2px 0 #000}}
@media(max-width:520px){.upgrade-purchase-actions{grid-template-columns:1fr}.upgrade-purchase-actions>a{grid-column:1}.upgrade-preview-wrap img{height:130px}}
.pan-hint{position:fixed;left:50%;bottom:16px;z-index:80;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;background:#fff;border:1px solid #000;font-size:11px;box-shadow:3px 3px 0 #000;animation:hint-fade 5s forwards}.pan-hint[hidden]{display:none}.pan-hint button{border:0;background:none;font-size:18px;line-height:1;cursor:pointer;padding:0 2px}@keyframes hint-fade{0%,85%{opacity:1}100%{opacity:0}}

/* Keep export choices and their terms reachable in short or narrow viewports. */
.export-menu{max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
.export-offer{margin:6px 0 0}
.export-offer button{min-height:44px;font-size:11px;line-height:1.3;padding:8px}
.modal-card{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.upgrade-card{width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:24px}
.upgrade-card h2{padding-right:26px}
.upgrade-close{position:absolute;top:2px;right:2px;width:44px;height:44px;border:0;background:#fff;color:#000;font-size:26px;cursor:pointer}
.upgrade-card .upgrade-error{margin-top:16px;padding:12px;border:2px solid var(--red);color:#a32110;font-size:13px}
.upgrade-error[hidden],.upgrade-product[hidden]{display:none}
.upgrade-product{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border:1px solid #bbb}
.upgrade-product h3{margin:0;font:900 14px/1.3 Archivo,sans-serif;text-transform:uppercase}
.upgrade-product p{font-size:12px;line-height:1.5}
.upgrade-product .upgrade-scope{color:#555;font-size:11px}
.upgrade-product .upgrade-cta{width:100%;margin-top:auto;font-size:11px;line-height:1.4}
.upgrade-purchase-actions>a{display:flex;align-items:center;justify-content:center;min-height:44px;line-height:1.4}
.upgrade-dismiss{margin-top:4px}
.upgrade-dismiss button{min-height:44px}
.upgrade-cta:disabled{opacity:.5;cursor:wait}
.export-entry-notice{position:absolute;top:72px;left:50%;transform:translateX(-50%);z-index:36;display:flex;align-items:center;gap:8px;width:min(480px,calc(100vw - 24px));padding:8px 10px;background:#fff;border:2px solid #000;box-shadow:3px 3px 0 #000;font-size:12px;line-height:1.5}
.export-entry-notice[hidden]{display:none}
.export-entry-notice button{flex:0 0 44px;height:44px;background:#fff;border:0;font-size:24px;cursor:pointer}
@media(max-width:560px){
  .topbar{height:72px;grid-template-columns:minmax(96px,1fr) auto}
  .stage{padding-top:72px}
  .chart-title-row{height:44px}
  .chart-title-input{font-size:16px}
  .chart-picker{flex-basis:36px;width:36px}
  .topbar-button,.auth,.auth.is-account{height:44px;min-width:44px}
  .topbar-export .dial-label{display:inline;letter-spacing:-.04em}
  .topbar-button{gap:4px;padding:0 6px}
  .chart-menu{top:80px}
  .export-menu{top:80px;max-height:calc(100dvh - 96px)}
  .export-entry-notice{top:84px}
  .upgrade-card{padding:20px 16px}
  .upgrade-preview-wrap img{height:110px}
  .pan-hint{bottom:68px;width:min(280px,calc(100vw - 100px));font-size:10px}
  .editor{font-size:16px}
}
@media(pointer:coarse){
  .fab-btn{min-width:44px;min-height:44px}
  .tool-btn{width:44px;height:44px}
  .tool-ind{height:44px}
  .tool.is-move .tool-ind{transform:translateY(44px)}
  .zoom-controls button{height:44px;min-width:44px}
  .edge-menu-button{width:44px;height:44px}
  .node-colors{gap:2px}
  .node-colors button{width:44px;height:44px;border:11px solid #fff;box-shadow:inset 0 0 0 1px var(--swatch)}
  .node-colors button.is-active{border:11px solid #fff;outline:2px solid var(--red);outline-offset:-7px}
  .node-styles button{width:44px;min-height:48px}
  .chart-picker{flex-basis:44px;width:44px}
  .chart-row button,.chart-menu-head button{min-height:44px}
  .modal-actions button,.share-url button,.share-url input,.share-actions button{min-height:44px}
  .pan-hint button{min-width:44px;min-height:44px}
}