/* OceanofTools — URL_Extractor_Tool.php
   Page-specific tool/workspace CSS only. Universal header/footer stays in /style/header_footer.css. */
/* ===== Migrated from text_tool_hub/URL_Extractor_Tool.php inline <style> ===== */
.container1 {
  max-width:none;
  margin: 0 auto;
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding: 30px;
  margin-left: 50px;
  margin-right: 50px;
}

/* === Hero Section === */
.hero {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
}

.hero-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 10px;
  color: #1a75ff;
}

h1 {
  font-size: 2.2rem;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #1a75ff, #0d47aa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  color: #555;
  font-size: 1.1rem;
  max-width: 750px;
  margin: 0 auto;
  opacity: 0.9;
}

  .options-container {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .options-title {
    font-size: 20px;
    color: #2d3748;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }

  .option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .option-label {
    font-size: 14px;
    font-weight: 500;
    color: #4a5568;
  }

  .input-field {
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
  }

  .input-field:focus {
    outline: none;
    border-color: #14b89a;
  }

  .checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
  }

  .checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  .checkbox-label {
    font-size: 14px;
    color: #4a5568;
    cursor: pointer;
  }

  .tool-interface {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  @media (max-width: 768px) {
    .tool-interface {
      grid-template-columns: 1fr;
    }
  }

  .input-section, .output-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
  }

  .section-title {
    font-size: 18px;
    color: #2d3748;
    margin-bottom: 16px;
    font-weight: 600;
  }

  .textarea {
    flex: 1;
    min-height: 300px;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    resize: vertical;
    transition: border-color 0.2s;
  }

  .textarea:focus {
    outline: none;
    border-color: #14b89a;
  }

  .textarea::placeholder {
    color: #a0aec0;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
  }

  @media (max-width: 600px) {
    .stats {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .stat-card {
    background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    color: white;
  }

  .stat-number {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .stat-label {
    font-size: 12px;
    opacity: 0.9;
  }

  .copy-btn {
    margin-top: 16px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  }

  .copy-btn:active {
    transform: translateY(0);
  }

  .success-message {
    margin-top: 12px;
    padding: 12px;
    background: #48bb78;
    color: white;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .success-message.show {
    opacity: 1;
  }
  
  
  
   .docs-container {
    max-width:none;
    margin-right: 20px;
    margin-left: 20px;
  }

  .docs-header {
    background: white;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  .docs-header h1 {
    font-size: 42px;
    color: #2d3748;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .tagline {
    font-size: 18px;
    color: #718096;
  }

  .docs-nav {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-btn {
    padding: 12px 24px;
    background: white;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    color: #4a5568;
  }

  .nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .nav-btn.active {
    background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
    color: white;
  }

  .docs-content {
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

   
 
  .section-heading {
    font-size: 32px;
    color: #2d3748;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid #14b89a;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
  }

  .feature-card {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    padding: 24px;
    border-radius: 12px;
    border-left: 4px solid #14b89a;
    transition: transform 0.3s, box-shadow 0.3s;
  }

  .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
  }

  .feature-icon {
    font-size: 36px;
    margin-bottom: 12px;
  }

  .feature-card h3 {
    color: #2d3748;
    font-size: 18px;
    margin-bottom: 8px;
  }

  .feature-card p {
    color: #4a5568;
    font-size: 14px;
  }

  .supported-formats {
    background: #f7fafc;
    padding: 24px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
  }

  .supported-formats h3 {
    color: #2d3748;
    margin-bottom: 16px;
  }

  .supported-formats ul {
    list-style: none;
    padding: 0;
  }

  .supported-formats li {
    padding: 8px 0;
    color: #4a5568;
  }

  .supported-formats code {
    background: #14b89a;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
  }

  .steps-container {
    margin-bottom: 40px;
  }

  .step {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding: 24px;
    background: #f7fafc;
    border-radius: 12px;
  }

  .step-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
    color: white;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .step-content h3 {
    color: #2d3748;
    margin-bottom: 12px;
    font-size: 20px;
  }

  .step-content p {
    color: #4a5568;
    margin-bottom: 12px;
  }

  .step-content ul {
    color: #4a5568;
    padding-left: 20px;
  }

  .step-content li {
    margin-bottom: 6px;
  }

  .examples-section {
    margin-bottom: 40px;
  }

  .examples-section h3 {
    color: #2d3748;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .example {
    margin-bottom: 30px;
  }

  .example h4 {
    color: #2d3748;
    margin-bottom: 12px;
    font-size: 18px;
  }

  .example-box {
    background: #f7fafc;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #14b89a;
  }

  .example-box strong {
    color: #2d3748;
    display: block;
    margin-bottom: 8px;
  }

  .example-box pre {
    background: white;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 12px;
    color: #2d3748;
    border: 1px solid #e2e8f0;
  }

  .tips-section {
    margin-bottom: 40px;
  }

  .tips-section h3 {
    color: #2d3748;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .tip-cards {
    display: grid;
    gap: 16px;
  }

  .tip-card {
    background: linear-gradient(135deg, #fef5e7 0%, #fdeaa3 100%);
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #f39c12;
    color: #7d6608;
  }

  .about-content {
    color: #4a5568;
  }

  .about-block {
    margin-bottom: 40px;
  }

  .about-block h3 {
    color: #2d3748;
    margin-bottom: 16px;
    font-size: 24px;
  }

  .about-block p {
    margin-bottom: 12px;
    line-height: 1.8;
  }

  .about-block ul {
    padding-left: 20px;
    margin-bottom: 12px;
  }

  .about-block li {
    margin-bottom: 8px;
  }

  .use-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
  }

  .use-case {
    background: #f7fafc;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #14b89a;
  }

  .use-case strong {
    color: #2d3748;
    display: block;
    margin-bottom: 8px;
  }

  .advantage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }

  .advantage {
    background: #f0fff4;
    padding: 12px;
    border-radius: 6px;
    color: #22543d;
    font-weight: 500;
    text-align: center;
    border: 2px solid #9ae6b4;
  }

  .privacy-note {
    background: #f0fff4;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #48bb78;
    color: #22543d;
    font-weight: 500;
    margin-top: 16px;
  }

  .browser-support {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .browser {
    background: #f7fafc;
    padding: 8px 16px;
    border-radius: 6px;
    border: 2px solid #e2e8f0;
    color: #2d3748;
    font-weight: 500;
  }

  .feedback-block {
    background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
    padding: 24px;
    border-radius: 12px;
    border-left: 4px solid #14b89a;
  }

  @media (max-width: 768px) {
    .docs-header {
      padding: 30px 20px;
    }

    .docs-header h1 {
      font-size: 32px;
    }

    .tagline {
      font-size: 16px;
    }

    .docs-content {
      padding: 24px;
    }

    .section-heading {
      font-size: 26px;
    }

    .step {
      flex-direction: column;
    }
  }

/* ===== Migrated from style/tool-suite.css ===== */
/* OceanofTools shared premium tool interface */
:root{--oot-primary:#0e9379;--oot-primary-dark:#087461;--oot-secondary:#14b8a6;--oot-accent:#06b6d4;--oot-bg:#f3f7fc;--oot-card:#ffffff;--oot-text:#132238;--oot-muted:#61758f;--oot-border:#dbe3f0;--oot-success:#15803d;--oot-danger:#b91c1c;--oot-warning:#a16207;--oot-radius:24px;--oot-shadow:0 22px 56px rgba(17,31,61,.1);--oot-shadow-strong:0 28px 70px rgba(9,19,37,.16)}
html{scroll-behavior:smooth}body.oot-modern{margin:0;background:radial-gradient(circle at top left,rgba(37,99,235,.08),transparent 18%),radial-gradient(circle at top right,rgba(6,182,212,.08),transparent 18%),linear-gradient(180deg,#f7f9fc 0%,#eef3f9 100%);color:var(--oot-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}body.oot-modern *{box-sizing:border-box}body.oot-modern [hidden]{display:none!important}body.oot-modern img,body.oot-modern canvas,body.oot-modern svg,body.oot-modern video{max-width:100%}body.oot-modern button,body.oot-modern input,body.oot-modern select,body.oot-modern textarea{font:inherit}body.oot-modern button{touch-action:manipulation}body.oot-modern a,body.oot-modern button,body.oot-modern input,body.oot-modern select,body.oot-modern textarea{outline-offset:3px}body.oot-modern :focus-visible{outline:3px solid rgba(37,99,235,.30)}
body.oot-modern>.hero,body.oot-modern main>.hero,body.oot-modern .container1>.hero{position:relative;width:min(1240px,calc(100% - 28px));margin:28px auto 24px!important;padding:36px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:30px!important;background:radial-gradient(circle at top right,rgba(6,182,212,.18),transparent 22%),linear-gradient(135deg,#0f1c34,#142749 58%, #1b2f57 100%)!important;color:#fff!important;box-shadow:var(--oot-shadow-strong)!important;text-align:left!important;overflow:hidden}body.oot-modern .container1>.hero{width:100%;margin:0 0 24px!important}body.oot-modern .hero h1,body.oot-modern .hero h1 *{margin-top:0!important;color:#fff!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#fff!important;line-height:1.04!important;font-size:clamp(2rem,5vw,3.55rem)!important;letter-spacing:-.04em}body.oot-modern .hero p{max-width:860px!important;margin:14px 0 0!important;color:rgba(255,255,255,.82)!important;font-size:1.05rem!important;line-height:1.72!important}body.oot-modern .hero-icon{display:inline-grid!important;place-items:center;width:66px;height:66px;margin:0 0 15px!important;border-radius:20px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;font-size:1.7rem!important;border:1px solid rgba(255,255,255,.08)}
body.oot-modern .container1,body.oot-modern .container2,body.oot-modern .tool-container,body.oot-modern .calculator-container,body.oot-modern .main-container,body.oot-modern .content-container{width:min(1240px,calc(100% - 28px))!important;max-width:1240px!important;margin:24px auto!important;border:1px solid var(--oot-border)!important;border-radius:var(--oot-radius)!important;background:linear-gradient(180deg,#fff,#fbfcff)!important;box-shadow:var(--oot-shadow)!important;padding:28px!important;overflow:visible!important}body.oot-modern .container1 .container1,body.oot-modern .container1 .container2,body.oot-modern .container2 .container1,body.oot-modern .tool-container .container1{width:100%!important;margin:18px 0!important;box-shadow:none!important}
body.oot-modern .content-section,body.oot-modern .faq-section,body.oot-modern .how-to-use,body.oot-modern .features-section,body.oot-modern .about-section,body.oot-modern .stats-card,body.oot-modern .feature-card,body.oot-modern .result-card,body.oot-modern .doc-step,body.oot-modern .doc-section{border:1px solid var(--oot-border)!important;border-radius:20px!important;background:#fff!important;color:var(--oot-text)!important;box-shadow:0 14px 28px rgba(17,31,61,.06)!important}body.oot-modern h1,body.oot-modern h2,body.oot-modern h3{color:var(--oot-text);overflow-wrap:anywhere}body.oot-modern h2{line-height:1.18;letter-spacing:-.03em}body.oot-modern p,body.oot-modern li{line-height:1.7}body.oot-modern .section-description,body.oot-modern .description,body.oot-modern .subtitle,body.oot-modern .help-text{color:var(--oot-muted)!important}
body.oot-modern input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),body.oot-modern select,body.oot-modern textarea{max-width:100%;min-height:48px;padding:12px 14px;border:1px solid #d2dcec!important;border-radius:16px!important;background:#fff!important;color:var(--oot-text)!important;box-shadow:none!important}body.oot-modern textarea{resize:vertical;line-height:1.6}body.oot-modern input:focus,body.oot-modern select:focus,body.oot-modern textarea:focus{border-color:var(--oot-primary)!important;box-shadow:0 0 0 4px rgba(37,99,235,.12)!important}body.oot-modern input[type=file]{max-width:100%}body.oot-modern input[type=checkbox],body.oot-modern input[type=radio]{accent-color:var(--oot-primary)}
body.oot-modern .btn,body.oot-modern .primary-btn,body.oot-modern .action-btn,body.oot-modern .convert-btn,body.oot-modern .calculate-btn,body.oot-modern .process-btn,body.oot-modern .download-btn,body.oot-modern .upload-btn,body.oot-modern button[class*=primary],body.oot-modern button[class*=convert],body.oot-modern button[class*=calculate],body.oot-modern button[class*=generate]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:16px!important;font-weight:800!important;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,border-color .18s ease;background:#fff;color:var(--oot-text);border:1px solid #d7e0ef!important;box-shadow:0 10px 24px rgba(17,31,61,.06)!important}body.oot-modern .primary-btn,body.oot-modern .convert-btn,body.oot-modern .calculate-btn,body.oot-modern .process-btn,body.oot-modern button[class*=primary],body.oot-modern button[class*=convert],body.oot-modern button[class*=calculate],body.oot-modern button[class*=generate]{border:1px solid transparent!important;background:linear-gradient(135deg,var(--oot-primary),var(--oot-secondary))!important;color:#fff!important;box-shadow:0 16px 34px rgba(37,99,235,.26)!important}body.oot-modern button:hover:not(:disabled),body.oot-modern .btn:hover{transform:translateY(-1px)}body.oot-modern button:disabled{cursor:not-allowed;opacity:.55;transform:none!important;box-shadow:none!important}
body.oot-modern .drop-zone,body.oot-modern .upload-area,body.oot-modern .file-upload,body.oot-modern [class*=dropzone]{border:2px dashed #b8c8e4!important;border-radius:20px!important;background:linear-gradient(180deg,#fbfcff,#f4f8ff)!important;transition:.2s ease;padding:18px!important}body.oot-modern .is-dragging{border-color:var(--oot-primary)!important;background:#eef1ff!important}
body.oot-modern .result,body.oot-modern .result-section,body.oot-modern .output-section,body.oot-modern .output-container,body.oot-modern .preview-section,body.oot-modern .preview-area{min-width:0;border:1px solid var(--oot-border)!important;border-radius:20px!important;background:#fff!important;box-shadow:0 14px 28px rgba(17,31,61,.05)!important}body.oot-modern .success,body.oot-modern .success-message{border:1px solid #bde5c7!important;background:#f0fff4!important;color:var(--oot-success)!important}body.oot-modern .error,body.oot-modern .error-message{border:1px solid #f2c6c6!important;background:#fff4f4!important;color:var(--oot-danger)!important}
body.oot-modern table{width:100%;border-collapse:collapse}body.oot-modern th,body.oot-modern td{padding:12px 13px;border:1px solid var(--oot-border);text-align:left}body.oot-modern th{background:#f4f7fd}.oot-table-wrap{max-width:100%;overflow:auto;border-radius:16px;border:1px solid var(--oot-border)}.oot-table-wrap table{min-width:520px}
body.oot-modern .tool-interface,body.oot-modern .input-output-container,body.oot-modern .editor-container,body.oot-modern .controls-container,body.oot-modern .main-content{min-width:0}body.oot-modern canvas{height:auto!important}body.oot-modern iframe{max-width:100%;border-radius:16px}
body.oot-modern .faq-item,body.oot-modern details{border-radius:18px;border:1px solid var(--oot-border)!important;background:#fff!important}body.oot-modern details summary{cursor:pointer;padding:14px 16px;font-weight:800}.oot-toast{position:fixed;right:18px;bottom:18px;z-index:99999;width:min(390px,calc(100% - 36px));padding:14px 16px;border:1px solid #f2c6c6;border-radius:18px;background:#fff4f4;color:var(--oot-danger);box-shadow:0 16px 50px rgba(15,23,42,.18);font-weight:650}.oot-toast.is-success{border-color:#bde5c7;background:#f0fff4;color:var(--oot-success)}.oot-toast button{float:right;border:0;background:transparent;color:inherit;font-size:1.1rem}.oot-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.oot-modern .stat-card,body.oot-modern .metric-card,body.oot-modern .feature-card,body.oot-modern .color-card,body.oot-modern .palette-card,body.oot-modern .faq-card{padding:18px!important}
body.oot-modern .progress-bar{background:#e7eef9!important;border-radius:999px!important;overflow:hidden}body.oot-modern .progress-fill{background:linear-gradient(90deg,var(--oot-primary),var(--oot-secondary))!important;border-radius:999px!important}
@media(max-width:900px){body.oot-modern .tool-interface,body.oot-modern .input-output-container,body.oot-modern .editor-container,body.oot-modern .controls-container,body.oot-modern .main-content{grid-template-columns:1fr!important;flex-direction:column!important}body.oot-modern [style*="grid-template-columns"]{max-width:100%}body.oot-modern .sidebar,body.oot-modern [class*=sidebar]{position:static!important;width:100%!important;max-width:none!important}}
@media(max-width:720px){body.oot-modern>.hero,body.oot-modern main>.hero,body.oot-modern .container1>.hero{width:min(100% - 18px,1240px);padding:24px 19px!important;border-radius:24px!important;margin-top:14px!important}body.oot-modern .container1>.hero{width:100%}body.oot-modern .container1,body.oot-modern .container2,body.oot-modern .tool-container,body.oot-modern .calculator-container,body.oot-modern .main-container,body.oot-modern .content-container{width:min(100% - 18px,1240px)!important;margin:14px auto!important;padding:18px!important;border-radius:20px!important}body.oot-modern .container1 .container1,body.oot-modern .container1 .container2{width:100%!important}body.oot-modern .tool-interface>*,body.oot-modern .input-section,body.oot-modern .output-section{min-width:0!important;width:100%!important}body.oot-modern .button-group,body.oot-modern .actions,body.oot-modern .action-buttons,body.oot-modern .controls{flex-wrap:wrap!important}body.oot-modern .button-group>button,body.oot-modern .actions>button,body.oot-modern .action-buttons>button{flex:1 1 145px;min-height:46px}body.oot-modern input,body.oot-modern select,body.oot-modern textarea{font-size:16px!important}body.oot-modern .search-container{width:min(100% - 18px,1240px)!important;margin-left:auto!important;margin-right:auto!important}body.oot-modern pre,body.oot-modern code{white-space:pre-wrap;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body.oot-modern *,body.oot-modern *:before,body.oot-modern *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body.oot-modern .doc-container,body.oot-modern .docs-container,body.oot-modern .documentation,body.oot-modern .doc-section,body.oot-modern .doc-steps,body.oot-modern .doc-step,body.oot-modern .doc-step-content,body.oot-modern .feature-card,body.oot-modern .section-content {min-width: 0;max-width: 100%;overflow-wrap: anywhere}
body.oot-modern .doc-code-block,body.oot-modern .code-block,body.oot-modern pre {max-width: 100%;overflow-x: auto;border-radius:16px;border:1px solid var(--oot-border);background:#0f1c34;color:#e7efff;padding:16px}
@media(max-width:720px){body.oot-modern .doc-step{gap:12px!important;padding-left:14px!important;padding-right:14px!important}body.oot-modern .doc-step-content{width:auto!important;flex:1 1 auto!important}body.oot-modern .doc-step-number{flex:0 0 auto!important}}
@media(max-width:720px){body.oot-modern table:not(.oot-no-scroll){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}body.oot-modern table:not(.oot-no-scroll) caption{display:block;width:100%}}