/* SkinRender — Global UI (auto-generated from custom-code.php) */
 block for performance
 */
?>
<style>
/* ═══════════════════════════════════════════════════════════════
   LAYOUT — Every content section centers itself automatically
═══════════════════════════════════════════════════════════════ */

/* ── Base centering for ALL content section types ── */
/* These work standalone OR inside tool-page-content */

.tool-content {
  max-width: 860px;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
}
.howto-tool {
  max-width: 860px;
  margin: 2rem auto;
  padding: 1.5rem 1.25rem;
  background: rgba(99,102,241,.04);
  border: 1px solid rgba(99,102,241,.1);
  border-radius: 12px;
  box-sizing: border-box;
}
.howto-compact {
  max-width: 720px;
  margin: 1.5rem auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
}
.cluster-links {
  max-width: 860px;
  margin: 2rem auto;
  padding: 1.25rem 1.5rem;
  background: rgba(99,102,241,.04);
  border: 1px solid rgba(99,102,241,.1);
  border-radius: 12px;
  box-sizing: border-box;
}
.guide-related {
  max-width: 860px;
  margin: 2.5rem auto 1rem;
  padding: 1.5rem 1.25rem 0;
  border-top: 1px solid rgba(99,102,241,.12);
  box-sizing: border-box;
}
.related-tools {
  max-width: 860px;
  margin: 2rem auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
}

/* ── tool-page-content: wrapper below canvas tools ── */
/* Sections inside it fill the container (no double padding) */
.tool-page-content {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
}
.tool-page-content .tool-content,
.tool-page-content .faq-section,
.tool-page-content .howto-tool,
.tool-page-content .howto-compact,
.tool-page-content .cluster-links,
.tool-page-content .guide-related,
.tool-page-content .related-tools {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.tool-page-content > section,
.tool-page-content > div {
  box-sizing: border-box;
}

/* ── guide-container: article/programmatic SEO pages ── */
.guide-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  box-sizing: border-box;
}
.guide-container > h1 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.18;
  color: var(--tx0);
  margin-bottom: 1.5rem;
}
.guide-category {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold);
  display: block;
  margin-bottom: .5rem;
}
.guide-content { line-height: 1.75; }
.guide-related h2 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--tx0);
  margin-bottom: .75rem;
}

/* ── tool-headline-wrap: H1 above canvas ── */
.tool-headline-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem .75rem;
  box-sizing: border-box;
}
.tool-headline-wrap h1 {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--tx0);
  margin-bottom: .35rem;
  line-height: 1.2;
}
.tool-headline-wrap p {
  font-size: .9rem;
  color: var(--tx1);
  line-height: 1.6;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .tool-content, .faq-section, .howto-tool, .cluster-links,
  .guide-related, .related-tools, .howto-compact { padding-left: .9rem; padding-right: .9rem; }
  .tool-page-content { padding-left: .9rem; padding-right: .9rem; }
  .guide-container { padding: 1.75rem .9rem 3rem; }
  .tool-headline-wrap { padding: 1.25rem 1rem .5rem; }
  .howto-tool, .cluster-links { padding: 1rem .9rem; }
}
@media (max-width: 480px) {
  .tool-content, .faq-section, .howto-tool, .cluster-links,
  .guide-related, .related-tools, .howto-compact { padding-left: .75rem; padding-right: .75rem; }
  .tool-page-content { padding-left: .75rem; padding-right: .75rem; }
  .guide-container { padding: 1.25rem .75rem 2.5rem; }
  .howto-tool, .cluster-links { padding: 1rem .75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY UPGRADE — smoother reading, better hierarchy
═══════════════════════════════════════════════════════════════ */

/* Body text — slightly warmer, better reading size */
body { font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Headings — tighter tracking, more refined */
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.04em; line-height: 1.15; }
h2 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); letter-spacing: -.025em; line-height: 1.25; }
h3 { font-size: clamp(.95rem, 2vw, 1.1rem); letter-spacing: -.015em; }

/* Paragraph base */
p { color: var(--tx1); line-height: 1.7; }

/* Links — consistent base style */
a { transition: color .15s, opacity .15s; }

/* Code — refined mono */
code, kbd, samp { font-family: var(--f-mono); font-size: .87em; background: rgba(99,102,241,.1); padding: .1em .4em; border-radius: 5px; color: var(--gold); }


/* ═══════════════════════════════════════════════════════════════
   TOOL CONTENT — unified content block for all tool pages
═══════════════════════════════════════════════════════════════ */
.tool-content h2 {
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tx0);
  margin: 2.25rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(99,102,241,.12);
}
.tool-content h2:first-child { margin-top: 0; }
.tool-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tx0);
  margin: 1.5rem 0 .5rem;
}
.tool-content p {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--tx1);
  margin-bottom: .75rem;
}
.tool-content ul, .tool-content ol {
  padding-left: 1.4rem;
  margin: .75rem 0 1rem;
}
.tool-content li {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--tx1);
  margin-bottom: .45rem;
}
.tool-content li strong { color: var(--tx0); }
.tool-content a { color: var(--indigo); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(99,102,241,.3); }
.tool-content a:hover { color: var(--violet); border-bottom-color: var(--violet); }

/* Tables — with mobile scroll */
.tool-content .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0 1.5rem;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.12);
}
.tool-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  min-width: 400px; /* forces scroll on small screens */
}
.tool-content thead tr { background: rgba(99,102,241,.1); }
.tool-content th {
  padding: .65rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tx0);
  white-space: nowrap;
}
.tool-content td {
  padding: .55rem 1rem;
  border-bottom: 1px solid rgba(99,102,241,.07);
  color: var(--tx1);
  line-height: 1.5;
}
.tool-content tr:last-child td { border-bottom: none; }
.tool-content tr:hover td { background: rgba(99,102,241,.04); }

/* Inline tables (not in .table-wrap) get auto-wrap */
.tool-content table:not(.no-wrap) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* FAQ in tool content */
.tool-content 


/* ═══════════════════════════════════════════════════════════════
   SEO INTRO BLOCK
═══════════════════════════════════════════════════════════════ */
.seo-intro {
  background: rgba(99,102,241,.04);
  border-top: 1px solid rgba(99,102,241,.1);
  border-bottom: 1px solid rgba(99,102,241,.1);
  padding: 2rem 1rem;
}
.seo-intro-inner {
  max-width: 760px;
  margin: 0 auto;
}
.seo-intro h2 {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tx0);
  margin-bottom: .75rem;
}
.seo-intro p {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--tx1);
}
.seo-intro a { color: var(--indigo); text-decoration: none; border-bottom: 1px solid rgba(99,102,241,.25); }
.seo-intro a:hover { border-bottom-color: var(--indigo); }


/* ═══════════════════════════════════════════════════════════════
   RELATED TOOLS LIST
═══════════════════════════════════════════════════════════════ */
.related-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .75rem;
}
.related-list li {
  font-size: .88rem;
  color: var(--tx1);
  padding: .7rem 1rem;
  background: rgba(99,102,241,.04);
  border-radius: 8px;
  border-left: 2px solid rgba(99,102,241,.3);
  line-height: 1.5;
}
.related-list a { color: var(--indigo); font-weight: 600; text-decoration: none; }
.related-list a:hover { color: var(--violet); text-decoration: underline; }
.guide-related h2 { font-size: 1rem; font-weight: 700; color: var(--tx0); margin-bottom: .75rem; }


/* ═══════════════════════════════════════════════════════════════
   HOW-TO BLOCKS
═══════════════════════════════════════════════════════════════ */
.howto-tool h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tx0);
  margin-bottom: 1rem;
  border-bottom: none;
  padding-bottom: 0;
}
.howto-steps {
  padding-left: 1.3rem;
  margin: 0;
  counter-reset: steps;
}
.howto-steps li {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--tx1);
  margin-bottom: .5rem;
}
.howto-steps li strong { color: var(--tx0); }
.howto-steps a { color: var(--indigo); font-weight: 600; text-decoration: none; }
.howto-steps-compact { padding-left: 1.3rem; margin: .75rem 0; }
.howto-steps-compact li { font-size: .9rem; line-height: 1.7; color: var(--tx1); margin-bottom: .4rem; }
.howto-steps-compact a { color: var(--indigo); font-weight: 600; text-decoration: none; }
.howto-more { font-size: .82rem; color: var(--tx2); margin-top: .75rem; }
.howto-more a { color: var(--indigo); text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════
   CLUSTER LINKS (topical authority sections)
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   HERO SUB-LABEL + DYNAMIC BADGE
═══════════════════════════════════════════════════════════════ */
.hero-h1-sub {
  font-size: .9rem;
  color: var(--tx1);
  margin: .4rem 0 1.25rem;
  letter-spacing: .01em;
  line-height: 1.6;
}
.hero-h1-sub a { color: var(--indigo); text-decoration: none; font-weight: 500; }
.hero-h1-sub a:hover { color: var(--violet); }
.hero-dynamic {
  font-size: .72rem;
  display: inline-block;
  background: rgba(99,102,241,.15);
  color: var(--indigo);
  padding: .15em .65em;
  border-radius: 20px;
  margin-left: .5rem;
  vertical-align: middle;
  font-weight: 600;
  letter-spacing: .03em;
}


/* ═══════════════════════════════════════════════════════════════
   TOOL HEADLINE (above canvas tools)
═══════════════════════════════════════════════════════════════ */
.tool-headline {
  max-width: 860px;
  margin: 1.5rem auto .75rem;
  padding: 0 1rem;
}
.tool-headline h1 {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tx0);
  margin-bottom: .4rem;
}
.tool-headline p {
  font-size: .9rem;
  color: var(--tx1);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════
   FAQ — global refinements
═══════════════════════════════════════════════════════════════ */

.section-title {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tx0);
  text-align: center;
  margin-bottom: 1.5rem;
}
.faq-item {
  border: 1px solid rgba(99,102,241,.1);
  border-radius: 10px;
  margin-bottom: .5rem;
  overflow: hidden;
  transition: border-color .2s;
}
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .9rem 1.1rem;
  background: transparent;
  border: none;
  color: var(--tx0);
  font-size: .9rem;
  font-weight: 600;
  font-family: var(--f-body);
  cursor: pointer;
  text-align: left;
  gap: .75rem;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.45;
}
.faq-q:hover { background: rgba(99,102,241,.05); }
.faq-chevron { font-size: .85rem; flex-shrink: 0; transition: transform .25s; color: var(--tx2); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 1.1rem .9rem; }
.faq-item.open .faq-a { display: block; }
.faq-a p { font-size: .88rem; line-height: 1.72; color: var(--tx1); margin: 0; }


/* ═══════════════════════════════════════════════════════════════
   GUIDE CONTENT (guide.php articles)
═══════════════════════════════════════════════════════════════ */
.guide-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(99,102,241,.1);
}
.guide-header h1 {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--tx0);
  margin-bottom: .5rem;
  line-height: 1.2;
}
.guide-header p {
  font-size: .92rem;
  color: var(--tx1);
  line-height: 1.65;
}
.guide-content { line-height: 1.75; }
.guide-content h2 {
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tx0);
  margin: 2rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(99,102,241,.1);
}
.guide-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tx0);
  margin: 1.5rem 0 .5rem;
}
.guide-content p {
  font-size: .9rem;
  color: var(--tx1);
  margin-bottom: .75rem;
  line-height: 1.75;
}
.guide-content ul, .guide-content ol { padding-left: 1.4rem; margin: .75rem 0 1rem; }
.guide-content li { font-size: .9rem; color: var(--tx1); line-height: 1.7; margin-bottom: .4rem; }
.guide-content li strong { color: var(--tx0); }
.guide-content a { color: var(--indigo); text-decoration: none; border-bottom: 1px solid rgba(99,102,241,.25); }
.guide-content a:hover { color: var(--violet); border-bottom-color: var(--violet); }
.guide-content code { font-family: var(--f-mono); font-size: .85em; background: rgba(99,102,241,.1); padding: .1em .4em; border-radius: 5px; color: var(--gold); }
/* Tables in guides */
.guide-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  margin: 1rem 0 1.5rem;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.guide-content th {
  padding: .6rem 1rem;
  background: rgba(99,102,241,.1);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tx0);
  text-align: left;
  white-space: nowrap;
}
.guide-content td {
  padding: .5rem 1rem;
  border-bottom: 1px solid rgba(99,102,241,.07);
  color: var(--tx1);
}
.guide-content tr:hover td { background: rgba(99,102,241,.04); }


/* ═══════════════════════════════════════════════════════════════
   MOBILE — comprehensive responsive
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tool-content h2 { font-size: 1.05rem; }
  .tool-content table { font-size: .82rem; }
  .tool-content th, .tool-content td { padding: .5rem .65rem; }
  .related-list li { font-size: .85rem; padding: .6rem .85rem; }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.05rem; }
  .faq-a p { font-size: .85rem; }
  .tool-content h2 { font-size: 1rem; }
  .tool-content p, .tool-content li { font-size: .86rem; }
  .guide-content p, .guide-content li { font-size: .86rem; }
  .guide-header h1 { font-size: 1.35rem; }
  .related-list li { font-size: .83rem; }
}

/* ── Touch targets — iOS / Android ── */
button, .faq-q, .size-card, .mode-btn {
  min-height: 44px;
  touch-action: manipulation;
}

/* ── Prevent horizontal scroll on mobile ── */
.tool-content, .guide-content, .seo-intro-inner {
  overflow-x: hidden;
}
.tool-content table, .guide-content table {
  max-width: 100%;
}


@media (max-width: 768px) {
}