.oft-wrapper{position:relative;background:var(--bg);color:var(--text);
  font-family:'Inter',Helvetica,Arial,sans-serif;transition:color .15s;
  border-radius:0;height:auto;min-height:0;overflow-x:hidden;max-width:100%;}
.oft-wrapper *{box-sizing:border-box;}

.oft-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;padding:14px 24px 0;color:var(--dim);}
.oft-breadcrumb a{color:var(--node-stroke);text-decoration:none;}
.oft-breadcrumb a:hover{text-decoration:underline;color:var(--node-stroke-bright);}
.oft-breadcrumb-sep{color:var(--dim);}
.oft-breadcrumb-current{color:var(--title-color);font-weight:600;}

html{background:var(--bg-solid);height:auto !important;min-height:0 !important;
  overflow-x:hidden;}
body.oft-standalone-body{margin:0;padding:0;background:var(--bg-solid);
  height:auto !important;min-height:0 !important;overflow-x:hidden;max-width:100%;}

:root{
    --bg-solid:#eef1f4;
    --bg:#eef1f4;
    --line:#d3d9de;
    --node-fill:#bcd4e6;
    --node-stroke:#2e6690;
    --node-stroke-bright:#1f4d70;
    --leaf-fill:#1f7a4d;
    --leaf-fill-bright:#155c39;
    --text:#20262c;
    --title-color:#0a0d10;
    --dim:#535c66;
    --tag:#2e6690;
    --panel-bg:#ffffff;
    --panel-border:#d3d9de;
    --search-bg:#ffffff;
    --amber:#9c5f0a;
  }
  .oft-wrapper[data-theme="dark"]{
    --bg:#05070a;
    --bg-solid:#05070a;
    --line:#222c36;
    --node-fill:#0b1117;
    --node-stroke:#5fa8d3;
    --node-stroke-bright:#9fd6ff;
    --leaf-fill:#39d98a;
    --leaf-fill-bright:#7ef0b8;
    --text:#cfd8e3;
    --title-color:#f1f5f8;
    --dim:#6c8093;
    --tag:#7fb9e0;
    --panel-bg:#0c1117;
    --panel-border:#222c36;
    --search-bg:#0c1117;
    --amber:#e0a72e;
  }

  .oft-ad{width:100%;max-width:100%;display:flex;flex-direction:column;align-items:center;
    margin:18px 0;min-height:100px;padding:14px;border:1px solid var(--line);
    border-radius:10px;background:var(--panel-bg);overflow:hidden;}
  .oft-ad + .oft-ad{margin-top:14px;}
  .oft-ad ins.adsbygoogle{width:100%;max-width:970px;min-height:90px;overflow:hidden;}

  .corner-controls{position:absolute;top:18px;right:26px;z-index:6;display:flex;
    flex-wrap:wrap;justify-content:flex-end;gap:10px;max-width:calc(100% - 20px);}
  .btn{background:transparent;border:1px solid var(--line);color:var(--dim);
    padding:8px 16px;border-radius:6px;font-size:12.5px;cursor:pointer;font-family:inherit;
    transition:.15s;flex-shrink:0;white-space:nowrap;}
  .btn:hover{color:var(--text);border-color:var(--node-stroke);}
  .btn:focus-visible{outline:2px solid var(--node-stroke);outline-offset:2px;}

  .header{padding:26px 40px 14px;position:relative;z-index:2;text-align:center;}
  .header.no-title{padding:6px 16px 16px;}
  .header h1{font-size:clamp(26px, 6vw, 46px);font-weight:800;margin:0 0 4px;
    color:var(--title-color);letter-spacing:-1px;}
  .header .sub{font-size:12px;color:var(--dim);margin-bottom:16px;}
  .search-row{display:flex;justify-content:center;}
  #search{width:100%;max-width:560px;background:var(--search-bg);border:1px solid var(--line);
    color:var(--text);padding:12px 18px;border-radius:8px;font-size:15px;font-family:inherit;
    text-align:left;}
  #search:focus{outline:none;border-color:var(--node-stroke);
    box-shadow:0 0 0 3px rgba(46,102,144,.25);}
  #search::placeholder{color:var(--dim);}

  #canvas-wrap{position:relative;z-index:1;width:100%;border:1px solid var(--line);
    border-radius:10px;height:70vh;height:70dvh;max-height:680px;min-height:420px;
    overflow:hidden;cursor:grab;touch-action:none;}
  #canvas-wrap.grabbing{cursor:grabbing;}
  #canvas{display:block;}

  #canvas-wrap:fullscreen,
  #canvas-wrap:-webkit-full-screen,
  #canvas-wrap.oft-fallback-fullscreen{
    width:100vw;height:100vh;height:100dvh;max-height:none;min-height:0;
    border-radius:0;border:none;background:var(--bg);
  }
  #canvas-wrap.oft-fallback-fullscreen{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
  }

  .link{fill:none;stroke:var(--line);stroke-width:1.1px;}

  .node circle{cursor:pointer;transition:stroke .15s, fill .15s;}
  .node:focus{outline:none;}
  .node:focus circle{stroke:var(--amber);stroke-width:2.5px;}
  .node:focus text{font-weight:700;}
  .node circle.branch{fill:var(--node-fill);stroke:var(--node-stroke);stroke-width:1.6px;}
  .node circle.branch.expanded{fill:var(--node-stroke);}
  .node circle.leaf{fill:var(--leaf-fill);stroke:var(--leaf-fill);}
  .node:hover circle.branch{stroke:var(--node-stroke-bright);}
  .node:hover circle.leaf{fill:var(--leaf-fill-bright);}

  .node text{cursor:pointer;font-size:12.5px;dominant-baseline:middle;}
  .node text.root-text{fill:var(--title-color);font-size:14.5px;font-weight:700;}
  .node text.branch-text{fill:var(--text);}
  .node text.branch-text:hover{fill:var(--title-color);}
  .node text.leaf-text{fill:var(--leaf-fill);text-decoration:underline;
    text-decoration-color:var(--line);}
  .node text.leaf-text:hover{fill:var(--leaf-fill-bright);}
  .node text .tagspan{fill:var(--tag);font-size:10.5px;}
  .node text.match{fill:var(--amber)!important;font-weight:700;}
  .node text.match .tagspan{fill:var(--amber)!important;}

  .zoom-controls{position:absolute;bottom:14px;right:14px;z-index:6;display:flex;
    flex-direction:column;gap:6px;}
  .zbtn{width:34px;height:34px;border-radius:6px;border:1px solid var(--line);
    background:var(--panel-bg);color:var(--text);font-size:17px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;}
  .zbtn:hover{border-color:var(--node-stroke);}
  .zbtn:focus-visible{outline:2px solid var(--node-stroke);outline-offset:2px;}

  #notesPanel{position:absolute;top:0;right:0;width:min(300px, 85%);height:100%;
    background:var(--panel-bg);border-left:1px solid var(--panel-border);padding:24px 22px;
    z-index:7;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
    font-size:13px;line-height:1.7;color:var(--text);}
  #notesPanel.open{transform:translateX(0);}
  #notesPanel h3{color:var(--title-color);font-size:15px;margin-top:0;}
  #notesPanel code{background:var(--search-bg);padding:1px 5px;border-radius:3px;
    color:var(--leaf-fill);font-size:12px;}
  .legend-row{display:flex;gap:8px;margin-bottom:6px;}
  .legend-tag{display:inline-block;min-width:18px;text-align:center;color:var(--amber);
    font-weight:700;}
  #notesPanel a{color:var(--tag);text-decoration:none;}
  .closeNotes{position:absolute;top:18px;right:18px;background:none;border:none;
    color:var(--dim);font-size:18px;cursor:pointer;}
  .closeNotes:focus-visible{outline:2px solid var(--node-stroke);outline-offset:2px;
    border-radius:4px;}

  .oft-article{max-width:760px;margin:40px auto 8px;padding:0 20px;color:var(--text);}
  .oft-article h2{font-size:21px;font-weight:700;color:var(--title-color);
    margin:30px 0 10px;}
  .oft-article p{font-size:14.5px;line-height:1.75;color:var(--text);margin:0 0 4px;}
  .oft-article strong{color:var(--title-color);}

  .oft-article-eyebrow, .oft-faq-eyebrow{display:inline-block;font-size:11px;
    font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff;
    background:var(--node-stroke);
    padding:4px 12px;border-radius:20px;margin-top:30px;}
  .oft-article-eyebrow{margin-top:0;}
  .oft-article-eyebrow + h2, .oft-faq-eyebrow + h2{margin-top:10px;}
  .oft-article-title{font-size:26px !important;margin-bottom:24px !important;}

  .oft-history{display:flex;flex-direction:column;gap:14px;}
  .oft-history-block{display:flex;gap:16px;align-items:flex-start;
    border:1px solid var(--line);border-radius:14px;padding:20px 22px;
    background:var(--panel-bg);box-shadow:0 1px 3px rgba(15,30,45,.06);
    transition:box-shadow .2s ease, transform .2s ease;}
  .oft-history-block:hover{box-shadow:0 8px 22px rgba(15,30,45,.1);
    transform:translateY(-2px);}
  .oft-history-block:nth-of-type(3n+1) .oft-history-icon{background:var(--node-stroke);}
  .oft-history-block:nth-of-type(3n+2) .oft-history-icon{background:var(--leaf-fill);}
  .oft-history-block:nth-of-type(3n+3) .oft-history-icon{background:var(--amber);}
  .oft-history-icon{flex-shrink:0;width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:#fff;}
  .oft-history-icon svg{width:24px;height:24px;}
  .oft-history-body h3{margin:2px 0 8px;font-size:17px;font-weight:700;
    color:var(--title-color);}
  .oft-history-body p{font-size:14px;line-height:1.7;margin:0;}

  .oft-faq-eyebrow{margin-top:36px;}

  .oft-footer{width:100%;margin:44px 0 0;padding:20px 20px;
    border-top:1px solid var(--line);background:var(--panel-bg);text-align:center;}
  .oft-footer p{margin:0;font-size:12.5px;color:var(--dim);}

  .oft-faq{margin-top:14px;counter-reset:oftfaq;}
  .oft-faq-item{position:relative;counter-increment:oftfaq;
    border:1px solid var(--line);border-left:4px solid var(--node-stroke);
    border-radius:12px;padding:16px 18px;margin-bottom:12px;
    background:var(--panel-bg);box-shadow:0 1px 3px rgba(15,30,45,.06);
    transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
  .oft-faq-item:nth-of-type(even){border-left-color:var(--leaf-fill);}
  .oft-faq-item:hover{box-shadow:0 6px 18px rgba(15,30,45,.1);transform:translateY(-2px);}
  .oft-faq-item summary{cursor:pointer;font-weight:600;font-size:14.5px;
    color:var(--title-color);list-style:none;display:flex;align-items:center;
    gap:12px;}
  .oft-faq-item summary::-webkit-details-marker{display:none;}
  .oft-faq-item summary::before{content:counter(oftfaq);flex-shrink:0;
    width:24px;height:24px;border-radius:50%;background:var(--node-stroke);
    color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;
    justify-content:center;}
  .oft-faq-item:nth-of-type(even) summary::before{background:var(--leaf-fill);}
  .oft-faq-item summary .oft-faq-q{flex:1;}
  .oft-faq-item summary .oft-faq-chevron{flex-shrink:0;width:18px;height:18px;
    color:var(--dim);transition:transform .25s ease;}
  .oft-faq-item[open] summary .oft-faq-chevron{transform:rotate(180deg);
    color:var(--node-stroke);}
  .oft-faq-item p{margin:12px 0 0 36px;font-size:14px;line-height:1.7;
    color:var(--text);}

  /* ---- Responsive: tablets and phones ---- */
  @media (max-width: 700px){
    .oft-breadcrumb{padding:10px 16px 0;font-size:11.5px;gap:5px;}
    .header{padding:18px 16px 12px;}
    .header .sub{font-size:11px;}
    #search{max-width:100%;font-size:14px;padding:11px 14px;}

    #canvas-wrap{height:60vh;height:60dvh;min-height:360px;max-height:560px;border-radius:8px;}

    .corner-controls{top:8px;right:8px;gap:6px;}
    .btn{padding:6px 10px;font-size:11px;border-radius:5px;}

    .zoom-controls{bottom:8px;right:8px;gap:5px;}
    .zbtn{width:38px;height:38px;font-size:16px;}

    #notesPanel{padding:18px 16px;}
    .closeNotes{width:34px;height:34px;font-size:16px;}

    .oft-article{margin:24px auto 4px;padding:0 16px;}
    .oft-article h2{font-size:18px;margin:22px 0 8px;}
    .oft-article p{font-size:14px;}
    .oft-article-title{font-size:21px !important;}

    .oft-history-block{flex-direction:column;gap:10px;padding:16px 18px;}
    .oft-history-icon{width:38px;height:38px;}
    .oft-history-icon svg{width:20px;height:20px;}

    .oft-faq-item summary{padding:4px 0;}
  }

  @media (max-width: 420px){
    .corner-controls{max-width:60%;}
    .btn{padding:7px 10px;font-size:11px;min-height:34px;}
    #canvas-wrap{height:54vh;height:54dvh;min-height:320px;}
  }

  /* Respect users who've asked for reduced motion */
  @media (prefers-reduced-motion: reduce){
    .node, .link, #notesPanel, .oft-wrapper{transition:none !important;}
  }