:root {
  --ink: #17213d;
  --muted: #64708c;
  --paper: #fbfbff;
  --card: #ffffff;
  --line: #e3e7f1;
  --lavender: #7867e8;
  --lavender-dark: #5744c8;
  --lavender-soft: #efecff;
  --cyan: #44c6d5;
  --cyan-soft: #e7f9fb;
  --coral: #ff806f;
  --coral-soft: #fff0ed;
  --navy: #111936;
  --shadow: 0 18px 45px rgba(45, 50, 100, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% -10%, rgba(120, 103, 232, .12), transparent 31rem),
    radial-gradient(circle at 92% 9%, rgba(68, 198, 213, .11), transparent 28rem),
    var(--paper);
  color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  line-height: 1.8;
  letter-spacing: .015em;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.mascot { display:block; width:100%; height:auto; object-fit:contain; pointer-events:none; user-select:none; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--navy); color: white; padding: .7rem 1rem; border-radius: .75rem; }
.skip-link:focus { top: 1rem; }
.container { width: min(1160px, calc(100% - 32px)); margin-inline: auto; }
.narrow { width: min(780px, calc(100% - 32px)); margin-inline: auto; }
.section { padding: 76px 0; }
.section-sm { padding: 48px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--lavender-dark); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: linear-gradient(90deg, var(--lavender), var(--cyan)); }
.section-title { margin: .65rem 0 0; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.28; letter-spacing: -.035em; }
.section-lead { color: var(--muted); max-width: 700px; margin-top: 1rem; }
.card { border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 8px 25px rgba(45, 50, 100, .05); }
.soft-card { border: 1px solid rgba(120, 103, 232, .16); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,236,255,.72)); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .72rem 1.15rem; border: 0; border-radius: 999px; font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(68,198,213,.5); outline-offset: 3px; }
.btn-primary { background: linear-gradient(135deg, #6854d6, #4935b6); color: white; box-shadow: 0 11px 24px rgba(87,68,200,.25); }
.btn-secondary { background: white; color: var(--ink); border: 1px solid var(--line); }
.btn-coral { background: linear-gradient(135deg, #ff9a82, #f57d84); color: #251c3f; box-shadow: 0 11px 24px rgba(244,105,114,.22); }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .72rem; border-radius: 999px; background: var(--lavender-soft); color: var(--lavender-dark); font-size: .78rem; font-weight: 800; }
.pill-icon { width:18px; height:18px; }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(227,231,241,.82); background: rgba(251,251,255,.86); backdrop-filter: blur(18px); }
.maintenance-banner { padding:.7rem 0; background:#fff1c2; border-bottom:1px solid #ead17a; color:#624d08; font-size:.8rem; font-weight:750; }
.header-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 900; letter-spacing: -.035em; }
.brand-mark { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; color: white; background: linear-gradient(145deg, var(--lavender), var(--cyan)); box-shadow: 0 7px 18px rgba(99,92,207,.25); }
.brand-mark svg { width: 27px; height: 27px; }
.brand-sub { display: block; color: var(--muted); font-size: .64rem; letter-spacing: .08em; font-weight: 700; }
.desktop-nav { display: flex; align-items: center; gap: 1.35rem; font-size: .9rem; font-weight: 750; }
.desktop-nav a:not(.btn):hover { color: var(--lavender-dark); }
.mobile-menu { display: none; }

.site-footer { margin-top: 64px; background: var(--navy); color: #dce2f5; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; padding: 56px 0 38px; }
.footer-title { color: white; font-weight: 900; font-size: 1.18rem; }
.footer-copy { color:#afb8d4; font-size:.88rem; }
.footer-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .88rem; color: #afb8d4; }
.footer-note { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 30px; color: #8f9ab8; font-size: .76rem; }

.hero { padding: 54px 0 42px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(120,103,232,.2); border-radius: 999px; background: white; padding: .42rem .8rem; color: var(--lavender-dark); font-size: .8rem; font-weight: 800; }
.hero-badge svg { width: 20px; height: 20px; }
.hero h1 { display:grid; gap:.12em; max-width:700px; margin:1.05rem 0 1.15rem; font-size:clamp(2.35rem,5vw,4.15rem); line-height:1.13; letter-spacing:-.055em; text-wrap:balance; }
.hero-title-line { color:var(--ink); }
.hero-title-accent { color:transparent; background:linear-gradient(105deg,var(--lavender-dark),#695de8 42%,#168e9e); background-clip:text; }
.hero-copy { color: var(--muted); max-width: 630px; font-size: clamp(1rem, 2vw, 1.14rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.7rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
.hero-visual { position:relative; min-height:420px; border:1px solid rgba(120,103,232,.16); border-radius:34px; background:#f6ebd5; box-shadow:0 28px 70px rgba(30,35,88,.18); overflow:hidden; }
.hero-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 55%,rgba(10,15,42,.42)); }
.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.visual-card { position:absolute; z-index:1; padding:.7rem .85rem; border:1px solid rgba(255,255,255,.2); border-radius:15px; background:rgba(15,20,55,.7); color:white; backdrop-filter:blur(8px); font-size:.75rem; font-weight:800; }
.visual-card.one { left:18px; top:24px; transform:rotate(-2deg); }
.visual-card.two { left:24px; right:auto; top:126px; transform:rotate(2deg); }
.visual-card.three { right:24px; bottom:22px; }

.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.path-card { position:relative; min-height:215px; padding:1.25rem; overflow:hidden; isolation:isolate; border-top:3px solid var(--article-accent, var(--lavender)); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.path-card:hover { transform: translateY(-4px); border-color: var(--article-accent, var(--lavender)); box-shadow: var(--shadow); }
.path-card > :not(.path-mascot) { position:relative; z-index:1; }
.path-mascot { position:absolute; right:-.45rem; top:-.15rem; z-index:0; width:7.35rem; filter:drop-shadow(0 10px 15px rgba(45,50,100,.18)); }
.path-icon { width: 48px; height: 48px; display: grid; place-items:center; border-radius: 15px; background: var(--article-soft, var(--lavender-soft)); color: var(--article-ink, var(--lavender-dark)); }
.path-icon svg { width: 27px; height: 27px; }
.path-card h3 { max-width:calc(100% - 6.2rem); margin:.95rem 0 .35rem; font-size:1rem; }
.path-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.audience-side-routes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.audience-side-route { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.85rem; padding:.9rem 1rem; border:1px solid var(--line); border-left:4px solid var(--article-accent); border-radius:16px; background:white; transition:transform .18s ease,background .18s ease,border-color .18s ease; }
.audience-side-route:hover { transform:translateX(3px); background:var(--article-soft); border-color:var(--article-accent); }
.audience-side-route > span:first-child { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--article-ink); background:var(--article-soft); }
.audience-side-route svg { width:24px; height:24px; }
.audience-side-route > span:nth-child(2) { display:grid; min-width:0; }
.audience-side-route strong { font-size:.9rem; }
.audience-side-route small { color:var(--muted); font-size:.75rem; }
.audience-side-route b { color:var(--article-ink); }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; margin-top: 2rem; }
.card-link { margin-top:auto; padding-top:1rem; color:var(--lavender-dark); font-weight:800; font-size:.82rem; }

.article-accent-violet { --article-accent:#6b57d9; --article-soft:#f0edff; --article-ink:#4c3bac; }
.article-accent-cyan { --article-accent:#159dad; --article-soft:#e7f9fb; --article-ink:#0c6f7c; }
.article-accent-blue { --article-accent:#3d76d7; --article-soft:#edf4ff; --article-ink:#2558ac; }
.article-accent-coral { --article-accent:#e76859; --article-soft:#fff0ed; --article-ink:#a83b30; }
.article-accent-lime { --article-accent:#6b9f31; --article-soft:#f1f9e8; --article-ink:#426c1b; }
.article-accent-pink { --article-accent:#d85c9a; --article-soft:#fff0f7; --article-ink:#9a326a; }
.article-accent-indigo { --article-accent:#5868c8; --article-soft:#eef0ff; --article-ink:#3948a0; }
.article-accent-gold { --article-accent:#bc7b0b; --article-soft:#fff7de; --article-ink:#7b5105; }
.article-accent-mint { --article-accent:#159b75; --article-soft:#e8faf4; --article-ink:#0d6b52; }
.article-accent-rose { --article-accent:#c65476; --article-soft:#fff0f4; --article-ink:#913450; }

.featured-articles { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:1.2rem; margin-top:2rem; align-items:stretch; }
.featured-articles.single { grid-template-columns:minmax(0,720px); }
.featured-lead { display:flex; flex-direction:column; min-width:0; padding:clamp(1.45rem,3vw,2.25rem); border:1px solid var(--article-accent); border-radius:30px; background:linear-gradient(145deg,#fff 0%,var(--article-soft) 100%); box-shadow:0 18px 45px rgba(45,50,100,.08); transition:transform .18s ease,box-shadow .18s ease; }
.featured-lead:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.featured-lead-top { display:flex; align-items:center; gap:.8rem; }
.featured-lead-icon { width:68px; height:68px; display:grid; place-items:center; flex:0 0 auto; border-radius:22px; color:white; background:var(--article-accent); box-shadow:0 10px 24px rgba(45,50,100,.14); }
.featured-lead-icon svg { width:39px; height:39px; }
.featured-lead-kicker { color:var(--article-ink); font-size:.75rem; font-weight:900; letter-spacing:.08em; }
.featured-category { align-self:flex-start; margin-top:1.5rem; padding:.3rem .65rem; border-radius:999px; color:var(--article-ink); background:rgba(255,255,255,.76); font-size:.74rem; font-weight:850; }
.featured-lead h3 { max-width:680px; margin:.7rem 0 .65rem; font-size:clamp(1.45rem,3vw,2.15rem); line-height:1.45; letter-spacing:-.025em; }
.featured-lead p { margin:0; color:var(--muted); }
.featured-lead-link { margin-top:auto; padding-top:1.5rem; color:var(--article-ink); font-weight:900; }
.featured-list { display:grid; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:white; box-shadow:0 10px 30px rgba(45,50,100,.05); }
.featured-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.85rem; min-width:0; min-height:82px; padding:.85rem 1rem; border-bottom:1px solid var(--line); box-shadow:inset 4px 0 var(--article-accent); transition:background .18s ease; }
.featured-row:last-child { border-bottom:0; }
.featured-row:hover { background:var(--article-soft); }
.featured-row:focus-visible { position:relative; z-index:1; outline-offset:-4px; }
.featured-row-icon { width:43px; height:43px; display:grid; place-items:center; flex:0 0 auto; border-radius:14px; color:var(--article-ink); background:var(--article-soft); }
.featured-row-icon svg { width:24px; height:24px; }
.featured-row-copy { display:grid; min-width:0; }
.featured-row-copy small { color:var(--article-ink); font-size:.68rem; font-weight:850; }
.featured-row-copy strong { font-size:.9rem; line-height:1.48; }
.featured-row-arrow { color:var(--article-ink); font-weight:900; }

.explorer-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.32fr); gap:1rem; align-items:end; }
.article-discovery { display:grid; gap:3rem; margin-top:2rem; }
.directory-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:1rem; }
.directory-heading h2 { margin:.35rem 0 0; font-size:clamp(1.35rem,3vw,1.85rem); line-height:1.35; }
.directory-heading p { max-width:440px; margin:0; color:var(--muted); font-size:.82rem; }
.category-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); border-radius:22px; overflow:hidden; background:white; }
.category-directory-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.85rem; min-height:86px; padding:.85rem 1rem; border:0; border-bottom:1px solid var(--line); background:white; color:var(--ink); text-align:left; cursor:pointer; box-shadow:inset 4px 0 var(--article-accent); transition:background .18s ease; }
.category-directory-row:nth-child(odd) { border-right:1px solid var(--line); }
.category-directory-row:nth-last-child(-n+2) { border-bottom:0; }
.category-directory-row:hover { background:var(--article-soft); }
.category-directory-row:focus-visible { position:relative; z-index:1; outline:3px solid rgba(68,198,213,.5); outline-offset:-4px; }
.category-directory-icon { width:45px; height:45px; display:grid; place-items:center; border-radius:14px; color:var(--article-ink); background:var(--article-soft); }
.category-directory-icon svg { width:26px; height:26px; }
.category-directory-mascot { width:72px; height:72px; margin:-.45rem 0; filter:drop-shadow(0 7px 10px rgba(45,50,100,.14)); }
.category-directory-copy { display:grid; min-width:0; }
.category-directory-copy strong { font-size:.9rem; }
.category-directory-copy small { color:var(--muted); font-size:.76rem; line-height:1.5; }
.category-directory-count { color:var(--article-ink); font-size:.75rem; font-weight:850; white-space:nowrap; }
.starter-guides { padding:clamp(1.1rem,3vw,1.6rem); border-radius:24px; background:linear-gradient(145deg,rgba(239,236,255,.7),rgba(231,249,251,.72)); }
.starter-guide-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.article-row-link.compact { min-height:64px; background:rgba(255,255,255,.86); }
.article-row-link.compact .article-row-copy strong { font-size:.82rem; }
.result-summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem; padding:.65rem 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.84rem; }
.result-summary p { margin:0; }
.result-summary button { min-height:44px; border:0; background:transparent; color:var(--lavender-dark); cursor:pointer; font-weight:800; }
.article-catalog { display:grid; gap:1.5rem; margin-top:1.5rem; }
.explorer-more { display:flex; margin:1.25rem auto 0; }
.article-category-block { min-width:0; padding:clamp(1rem,2.5vw,1.55rem); border:1px solid var(--line); border-top:4px solid var(--article-accent); border-radius:28px; background:rgba(255,255,255,.94); box-shadow:0 10px 30px rgba(45,50,100,.045); }
.article-category-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9rem; padding-bottom:1.1rem; }
.article-category-icon { width:54px; height:54px; display:grid; place-items:center; flex:0 0 auto; border-radius:17px; color:var(--article-ink); background:var(--article-soft); }
.article-category-icon svg { width:31px; height:31px; }
.article-category-mascot { width:88px; height:88px; margin:-1.05rem 0 -.65rem; filter:drop-shadow(0 9px 13px rgba(45,50,100,.15)); }
.article-category-heading { min-width:0; }
.article-category-heading h2 { margin:0; font-size:1.25rem; line-height:1.35; }
.article-category-heading p { margin:.2rem 0 0; color:var(--muted); font-size:.78rem; }
.article-category-count { padding:.35rem .65rem; border-radius:999px; color:var(--article-ink); background:var(--article-soft); font-size:.74rem; font-weight:850; }
.category-article-layout { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:1rem; align-items:stretch; }
.category-article-layout.single { grid-template-columns:minmax(0,680px); }
.category-lead { display:flex; flex-direction:column; min-width:0; padding:1.3rem; border:1px solid var(--article-accent); border-radius:20px; background:var(--article-soft); transition:transform .18s ease,box-shadow .18s ease; }
.category-lead:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(45,50,100,.09); }
.category-lead-label { display:inline-flex; align-items:center; gap:.45rem; color:var(--article-ink); font-size:.72rem; font-weight:900; }
.category-lead-label svg { width:22px; height:22px; }
.category-lead h3 { margin:.75rem 0 .55rem; font-size:1.16rem; line-height:1.5; }
.category-lead p { margin:0; color:var(--muted); font-size:.8rem; }
.category-lead .card-link { color:var(--article-ink); }
.category-article-list { display:grid; gap:.55rem; min-width:0; }
.article-row-link { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem; min-width:0; min-height:70px; padding:.7rem .8rem; border:1px solid var(--line); border-radius:16px; background:white; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.article-row-link:hover { transform:translateX(2px); border-color:var(--article-accent); background:var(--article-soft); }
.article-row-icon { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; color:var(--article-ink); background:var(--article-soft); }
.article-row-icon svg { width:23px; height:23px; }
.article-row-copy { display:grid; min-width:0; }
.article-row-copy strong { font-size:.84rem; line-height:1.5; }
.article-row-copy small { margin-top:.16rem; color:var(--muted); font-size:.78rem; line-height:1.55; }
.article-row-arrow { flex:0 0 auto; color:var(--article-ink); font-weight:900; }
.article-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; min-width:0; }
.article-category-more { margin-top:1rem; border-top:1px solid var(--line); }
.article-category-more summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:48px; padding:.55rem .25rem 0; color:var(--article-ink); cursor:pointer; list-style:none; font-size:.8rem; font-weight:850; }
.article-category-more summary::-webkit-details-marker { display:none; }
.article-category-more summary:focus-visible, .filter-btn:focus-visible { outline:3px solid rgba(68,198,213,.5); outline-offset:3px; }
.article-category-more summary span { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:999px; color:var(--article-ink); background:var(--article-soft); transition:transform .18s ease; }
.article-category-more[open] summary span { transform:rotate(45deg); }
.article-category-more .article-results { margin-top:.75rem; }

.related-article-list { display:grid; margin-top:1rem; border-top:1px solid var(--line); }
.related-article-row { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:.85rem; min-width:0; min-height:96px; padding:.9rem .35rem; border-bottom:1px solid var(--line); transition:background .18s ease,padding .18s ease; }
.related-article-row:hover { padding-inline:.75rem; background:var(--article-soft); }
.related-article-number { color:var(--article-ink); font-size:.72rem; font-weight:900; letter-spacing:.08em; }
.related-article-icon { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; border-radius:14px; color:var(--article-ink); background:var(--article-soft); }
.related-article-icon svg { width:25px; height:25px; }
.related-article-copy { display:grid; min-width:0; }
.related-article-copy small { color:var(--article-ink); font-size:.68rem; font-weight:850; }
.related-article-copy strong { font-size:.9rem; line-height:1.5; }
.related-article-copy > span { margin-top:.15rem; color:var(--muted); font-size:.72rem; line-height:1.5; }
.related-article-arrow { color:var(--article-ink); font-weight:900; }
.tool-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2rem; }
.tool-card { min-height:235px; padding:1.25rem 1.25rem 5.6rem; position:relative; overflow:hidden; isolation:isolate; }
.tool-card::after { content:""; position:absolute; width:100px; height:100px; border-radius:50%; right:-45px; bottom:-50px; background:rgba(68,198,213,.12); }
.tool-card > :not(.tool-card-mascot) { position:relative; z-index:2; }
.tool-card-mascot { position:absolute; right:-.2rem; bottom:-.5rem; z-index:1; width:7rem; filter:drop-shadow(0 9px 14px rgba(45,50,100,.16)); }
.tool-icon { width:50px; height:50px; border-radius:16px; display:grid; place-items:center; color:white; background:linear-gradient(145deg,var(--lavender),var(--cyan)); }
.tool-svg { width:29px; height:29px; }
.tool-card h2 { margin:.9rem 0 .35rem; font-size:1rem; }
.tool-card p { margin:0; color:var(--muted); font-size:.8rem; }
.tool-meta { display:inline-block; margin-top:.8rem; color:var(--lavender-dark); font-size:.72rem; font-weight:800; }
.cta-band { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,300px); gap:2rem; align-items:center; padding:clamp(1.6rem,4vw,3rem); border-radius:32px; background:linear-gradient(135deg,#171f45,#3d377d 66%,#247e8d); color:white; overflow:hidden; position:relative; }
.cta-band::after { content:""; position:absolute; width:240px; height:240px; right:-70px; top:-90px; border-radius:50%; background:rgba(92,231,234,.18); }
.cta-band h2 { margin:0; font-size:clamp(1.6rem,4vw,2.5rem); line-height:1.35; }
.cta-band p { color:#cdd5ef; margin:.8rem 0 0; }
.cta-band .hero-actions { justify-content:flex-start; position:relative; z-index:2; margin-top:1.25rem; }
.cta-mascot { position:relative; z-index:1; width:min(100%,280px); height:auto; justify-self:end; align-self:end; margin:-2.5rem -1rem -3rem 0; filter:drop-shadow(0 18px 24px rgba(5,9,30,.28)); }

.page-hero { padding:58px 0 30px; }
.article-page-hero { padding:46px 0 24px; }
.illustrated-page-hero { position:relative; min-height:230px; padding-right:190px; overflow:hidden; }
.illustrated-page-hero-copy { max-width:800px; }
.page-hero-mascot { position:absolute; right:8px; bottom:-8px; width:176px; filter:drop-shadow(0 13px 20px rgba(45,50,100,.17)); }
.breadcrumb { display:flex; flex-wrap:wrap; gap:.45rem; color:var(--muted); font-size:.77rem; }
.breadcrumb span::before { content:"/"; margin-right:.45rem; color:#b4bbcd; }
.page-hero h1 { max-width:900px; margin:.9rem 0; font-size:clamp(2rem,5vw,3.7rem); line-height:1.22; letter-spacing:-.05em; }
.page-hero p { max-width:760px; margin:.9rem 0 0; color:var(--muted); font-size:1.02rem; line-height:1.9; }
.article-hero-grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr); column-gap:clamp(1.5rem,4vw,3.25rem); row-gap:.45rem; align-items:start; margin-top:1rem; }
.article-hero-copy { display:contents; }
.article-hero-copy > .pill { grid-column:1; grid-row:1; align-self:end; justify-self:start; }
.article-hero-copy h1 { grid-column:1; grid-row:2; max-width:720px; margin:.45rem 0 .2rem; font-size:clamp(2rem,4.35vw,3.35rem); }
.article-hero-summary { grid-column:1; grid-row:3; margin:.25rem 0 0 !important; }
.article-hero-answer { grid-column:1; grid-row:4; }
.article-heading-visual { position:relative; grid-column:2; grid-row:1/5; align-self:center; aspect-ratio:16/9; min-width:0; margin:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--article-accent) 35%,white); border-radius:28px; background:var(--article-soft); box-shadow:0 18px 45px rgba(45,50,100,.13); }
.article-heading-visual::after { content:""; position:absolute; inset:auto 0 0; height:5px; background:var(--article-accent); }
.article-heading-image { display:block; width:100%; height:100%; object-fit:cover; }
.filters { display:flex; flex-wrap:wrap; gap:.65rem; margin:1.5rem 0; }
.filter-btn { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; border:1px solid var(--line); background:white; border-radius:999px; padding:.52rem .85rem; cursor:pointer; color:var(--muted); font-size:.8rem; font-weight:750; }
.filter-icon { width:19px; height:19px; }
.filter-btn.active { background:var(--navy); color:white; border-color:var(--navy); }
.search-input { width:100%; min-height:52px; border:1px solid var(--line); border-radius:16px; background:white; padding:.8rem 1rem; color:var(--ink); }
.empty-state { padding:3rem; text-align:center; color:var(--muted); }
.empty-state-mascot { width:150px; margin:-1rem auto .5rem; filter:drop-shadow(0 10px 16px rgba(45,50,100,.16)); }

.article-layout { display:grid; grid-template-columns:minmax(0,760px) 260px; justify-content:center; column-gap:3rem; row-gap:0; align-items:start; padding-top:20px; padding-bottom:64px; }
.article-main { width:100%; min-width:0; }
.article-aside { position:sticky; top:92px; }
.toc { padding:1.1rem; }
.toc strong, .toc summary { font-size:.86rem; font-weight:850; }
.toc summary { cursor:pointer; list-style:none; }
.toc summary::-webkit-details-marker { display:none; }
.toc summary::after { content:"＋"; float:right; color:var(--lavender-dark); }
.toc[open] summary::after { content:"−"; }
.toc ol { margin:.7rem 0 0; padding-left:1.2rem; list-style:decimal outside; color:var(--muted); font-size:.78rem; }
.toc li::marker { color:var(--lavender-dark); font-weight:850; }
.toc a:hover { color:var(--lavender-dark); }
.toc-mobile { display:none; }
.article-content { font-size:1.0625rem; line-height:1.95; letter-spacing:.02em; }
.article-content h2 { margin:3.35rem 0 1.2rem; font-size:1.68rem; line-height:1.45; letter-spacing:-.02em; scroll-margin-top:100px; }
.article-content h3 { margin:2.2rem 0 .9rem; font-size:1.2rem; line-height:1.55; }
.article-content p { max-width:44rem; margin:1.2rem 0; text-wrap:pretty; }
.sentence-lines, .reading-paragraph { display:grid; gap:.52rem; }
.sentence-lines > span, .reading-paragraph > span { display:block; }
.article-content ul, .tool-workbench ul { margin:1.25rem 0; padding-left:0; list-style:none; }
.article-content ul > li, .tool-workbench ul > li { position:relative; min-height:2rem; padding-left:3rem; line-height:1.9; }
.article-content ul > li::before, .tool-workbench ul > li::before { content:""; position:absolute; left:0; top:.02em; width:32px; height:32px; background-color:transparent; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InN0aWNrZXIiIHgxPSI0IiB5MT0iMyIgeDI9IjMyIiB5Mj0iMzMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2ZmOTRjMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii40OCIgc3RvcC1jb2xvcj0iIzlhOGNmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1NGQ4ZTUiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImhhaXIiIHgxPSI5IiB5MT0iOCIgeDI9IjI3IiB5Mj0iMjkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlmOGNmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii41NiIgc3RvcC1jb2xvcj0iIzc1NjVlOSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0OGNhZGQiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImhlYWRzZXQiIHgxPSI4IiB5MT0iMTIiIHgyPSIyOSIgeTI9IjI1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZjgzYjgiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNTRkOGU1Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KCiAgPHJlY3QgeD0iMS43IiB5PSIxLjciIHdpZHRoPSIzMi42IiBoZWlnaHQ9IjMyLjYiIHJ4PSIxMSIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSJ1cmwoI3N0aWNrZXIpIiBzdHJva2Utd2lkdGg9IjIuNCIvPgogIDxyZWN0IHg9IjQuNiIgeT0iNC42IiB3aWR0aD0iMjYuOCIgaGVpZ2h0PSIyNi44IiByeD0iOC41IiBmaWxsPSIjZjVmMmZmIi8+CgogIDxwYXRoIGQ9Im05LjIgMTIuNi44LTUuMSA0LjYgMy4xbTEyLjIgMi0uOC01LjEtNC42IDMuMSIgZmlsbD0iIzhhNzhmMiIgc3Ryb2tlPSIjNjI1M2M5IiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJtMTAuMiAxMC40LjMtMS43IDEuNyAxLjNtMTMuNi40LS4zLTEuNy0xLjcgMS4zIiBmaWxsPSIjZmZjN2RjIi8+CgogIDxwYXRoIGQ9Ik04LjIgMThjMC02LjEgMy44LTEwLjEgOS44LTEwLjFTMjcuOCAxMS45IDI3LjggMTh2Mi43YzAgNi4xLTMuNyA5LjgtOS44IDkuOHMtOS44LTMuNy05LjgtOS44VjE4WiIgZmlsbD0idXJsKCNoYWlyKSIgc3Ryb2tlPSIjNjI1M2M5IiBzdHJva2Utd2lkdGg9IjEuMiIvPgogIDxwYXRoIGQ9Ik0xMC41IDE3LjdjMC00LjggMi44LTcuNiA3LjUtNy42czcuNSAyLjggNy41IDcuNnYyLjVjMCA0LjctMi45IDcuNy03LjUgNy43cy03LjUtMy03LjUtNy43di0yLjVaIiBmaWxsPSIjZmZmOWY1Ii8+CiAgPHBhdGggZD0iTTEwLjIgMTcuMmMuMi00LjYgMy4xLTcuNiA3LjgtNy42IDQuMiAwIDcgMi41IDcuNyA2LjQtMi4zLS4yLTQuNC0xLjEtNi0yLjctLjkgMS43LTIuNSAzLTQuOCAzLjlsLjItM2MtMSAxLjMtMi43IDIuNC00LjkgM1oiIGZpbGw9InVybCgjaGFpcikiLz4KICA8cGF0aCBkPSJNMTMuMyAxMS43YzEuNC0xIDMuMS0xLjUgNS4xLTEuNSIgc3Ryb2tlPSIjZDhkMmZmIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIuODUiLz4KCiAgPHBhdGggZD0iTTcuOCAyMHYtMi4zYzAtNS43IDQuNC0xMC4zIDEwLjItMTAuM3MxMC4yIDQuNiAxMC4yIDEwLjNWMjAiIHN0cm9rZT0idXJsKCNoZWFkc2V0KSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cmVjdCB4PSI2LjciIHk9IjE4IiB3aWR0aD0iNC4xIiBoZWlnaHQ9IjcuMiIgcng9IjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmODNiOCIgc3Ryb2tlLXdpZHRoPSIxLjM1Ii8+CiAgPHJlY3QgeD0iMjUuMiIgeT0iMTgiIHdpZHRoPSI0LjEiIGhlaWdodD0iNy4yIiByeD0iMiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjNTRjYmRjIiBzdHJva2Utd2lkdGg9IjEuMzUiLz4KICA8cGF0aCBkPSJNMjcuMiAyNGMtLjIgMi40LTEuNyAzLjUtNC40IDMuNWgtMSIgc3Ryb2tlPSIjNTRjYmRjIiBzdHJva2Utd2lkdGg9IjEuNDUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxjaXJjbGUgY3g9IjIxLjEiIGN5PSIyNy41IiByPSIxLjM1IiBmaWxsPSIjZmY3ZWFiIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjgiLz4KCiAgPHBhdGggZD0iTTEzIDIwLjdjMS0uOSAyLjEtLjkgMy4xIDAiIHN0cm9rZT0iIzU1NGE5MyIgc3Ryb2tlLXdpZHRoPSIxLjU1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8ZWxsaXBzZSBjeD0iMjEuMSIgY3k9IjIwLjIiIHJ4PSIyLjE1IiByeT0iMi41NSIgZmlsbD0iIzYyNTNjOSIvPgogIDxlbGxpcHNlIGN4PSIyMS41IiBjeT0iMTkuNSIgcng9Ii43MiIgcnk9Ii45IiBmaWxsPSIjZmZmIi8+CiAgPGNpcmNsZSBjeD0iMjAuMyIgY3k9IjIxLjMiIHI9Ii4zOCIgZmlsbD0iIzcxZTJlZCIvPgogIDxlbGxpcHNlIGN4PSIxMy4xIiBjeT0iMjMuNSIgcng9IjEuNjUiIHJ5PSIuNyIgZmlsbD0iI2ZmYjVjZSIgb3BhY2l0eT0iLjg1Ii8+CiAgPGVsbGlwc2UgY3g9IjIzLjEiIGN5PSIyMy41IiByeD0iMS42NSIgcnk9Ii43IiBmaWxsPSIjZmZiNWNlIiBvcGFjaXR5PSIuODUiLz4KICA8cGF0aCBkPSJNMTYuMSAyMy40YzEuMiAxLjMgMi42IDEuMyAzLjggMCIgc3Ryb2tlPSIjZWQ2NjhlIiBzdHJva2Utd2lkdGg9IjEuMzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgoKICA8cGF0aCBkPSJtMjkuMSA1LjguNTUgMS4zIDEuMy41NS0xLjMuNTUtLjU1IDEuMy0uNTUtMS4zLTEuMy0uNTUgMS4zLS41NS41NS0xLjNaIiBmaWxsPSIjZmZkOTVjIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iLjQ1Ii8+CiAgPHBhdGggZD0ibTUuNyAyNi4yLjQyLjk1Ljk1LjQyLS45NS40Mi0uNDIuOTUtLjQyLS45NS0uOTUtLjQyLjk1LS40Mi40Mi0uOTVaIiBmaWxsPSIjNjJkYmU3Ii8+Cjwvc3ZnPgo="); background-position:center; background-size:32px 32px; background-repeat:no-repeat; filter:drop-shadow(0 4px 6px rgba(93,82,165,.16)); }
.article-content ol, .tool-workbench ol { margin:1.25rem 0; padding-left:0; list-style:none; counter-reset:vtuber-step; }
.article-content ol > li, .tool-workbench ol > li { position:relative; min-height:2.2rem; padding:.15rem 0 .15rem 3rem; line-height:1.85; counter-increment:vtuber-step; }
.article-content ol > li::before, .tool-workbench ol > li::before { content:counter(vtuber-step,decimal-leading-zero); position:absolute; left:0; top:0; width:2.2rem; height:2.2rem; display:grid; place-items:center; border:2px solid #d9d4ff; border-radius:12px; color:white; background:linear-gradient(145deg,var(--lavender-dark),#278fa0); box-shadow:0 5px 12px rgba(65,58,145,.14); font-size:.64rem; font-weight:900; letter-spacing:.04em; }
.article-content ol > li::after, .tool-workbench ol > li::after { content:""; position:absolute; left:1.86rem; top:.08rem; width:7px; height:7px; border:2px solid white; border-radius:999px; background:var(--coral); }
.article-content li + li { margin-top:.9rem; }
.answer-box { padding:1.35rem 1.45rem; border-left:5px solid var(--cyan); background:var(--cyan-soft); border-radius:0 20px 20px 0; line-height:1.85; }
.answer-box strong { display:block; color:#116d79; margin-bottom:.35rem; }
.article-hero-answer { max-width:800px; margin-top:1.1rem; color:var(--ink); font-size:1rem; }
.article-at-a-glance { position:relative; margin:0 0 2rem; padding:1.2rem; overflow:hidden; border:1px solid color-mix(in srgb,var(--article-accent) 24%,white); border-radius:24px; background:linear-gradient(145deg,#fff,var(--article-soft)); }
.article-at-a-glance-head { position:relative; z-index:1; display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; padding-right:7.2rem; }
.article-glance-mascot { position:absolute; top:0; right:.2rem; width:7.7rem; filter:drop-shadow(0 9px 14px rgba(45,50,100,.16)); }
.article-at-a-glance-head > span { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; border-radius:15px; color:white; background:linear-gradient(145deg,var(--article-accent),var(--article-ink)); box-shadow:0 8px 18px rgba(49,52,105,.15); }
.article-at-a-glance-head svg { width:27px; height:27px; }
.article-at-a-glance-head small { display:block; color:var(--article-ink); font-size:.7rem; font-weight:900; letter-spacing:.06em; }
.article-at-a-glance-head h2 { margin:.1rem 0 0; font-size:1.25rem; }
.article-at-a-glance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.glance-card { position:relative; min-width:0; padding:2.65rem .9rem .9rem; border:1px solid rgba(112,120,160,.14); border-radius:16px; background:rgba(255,255,255,.82); }
.glance-card > span { position:absolute; top:.7rem; left:.8rem; width:1.55rem; height:1.55rem; display:grid; place-items:center; border-radius:8px; color:white; background:var(--article-accent); font-size:.62rem; font-weight:950; }
.glance-card small { display:block; color:var(--article-ink); font-size:.67rem; font-weight:900; }
.glance-card p { display:-webkit-box; overflow:hidden; margin:.28rem 0 0; color:#3e4961; font-size:.82rem; font-weight:700; line-height:1.65; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.glance-check > span { color:#136b59; background:#dff8ee; }
.glance-avoid > span { color:#a83246; background:var(--coral-soft); }
.article-introduction { display:grid; gap:.9rem; max-width:44rem; margin:0 0 2.8rem; color:#3d4965; font-size:1.05rem; line-height:1.95; counter-reset:intro-point; }
.article-introduction .reading-paragraph { position:relative; max-width:none; margin:0; padding:1.1rem 1.2rem 1.1rem 4.1rem; border:1px solid color-mix(in srgb,var(--article-accent) 22%,white); border-radius:18px; background:linear-gradient(135deg,#fff,var(--article-soft)); counter-increment:intro-point; }
.article-introduction .reading-paragraph::before { content:counter(intro-point,decimal-leading-zero); position:absolute; left:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:12px; color:white; background:linear-gradient(145deg,var(--article-accent),var(--article-ink)); font-size:.68rem; font-weight:900; letter-spacing:.06em; box-shadow:0 7px 15px rgba(65,58,145,.17); }
.article-detail-section { margin-top:3.2rem; padding-left:1rem; border-left:3px solid color-mix(in srgb,var(--article-accent) 20%,white); }
.article-reading-break { display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:.75rem; min-height:88px; margin:1.1rem 0 0; }
.article-reading-break.is-right { grid-template-columns:minmax(0,1fr) 104px; }
.article-reading-break + .article-detail-section { margin-top:1rem; }
.article-reading-mascot { grid-column:1; grid-row:1; width:104px; align-self:center; filter:drop-shadow(0 9px 14px rgba(45,50,100,.16)); }
.article-reading-trail { position:relative; grid-column:2; grid-row:1; height:2px; border-radius:999px; background:linear-gradient(90deg,color-mix(in srgb,var(--article-accent) 55%,white),transparent); }
.article-reading-trail::before { content:""; position:absolute; left:.2rem; top:50%; width:4rem; height:2rem; transform:translateY(-50%); opacity:.7; background:radial-gradient(circle at .5rem 1rem,var(--article-accent) 0 .2rem,transparent .24rem),radial-gradient(circle at 2rem .45rem,var(--cyan) 0 .14rem,transparent .18rem),radial-gradient(circle at 3.3rem 1.35rem,var(--coral) 0 .11rem,transparent .15rem); }
.article-reading-break.is-right .article-reading-mascot { grid-column:2; }
.article-reading-break.is-right .article-reading-trail { grid-column:1; transform:scaleX(-1); }
.article-illustrated-heading { display:grid; grid-template-columns:minmax(0,1fr) 104px; align-items:end; gap:1rem; margin:3.2rem 0 1.15rem; padding:1rem 1rem 0 1.2rem; overflow:hidden; border:1px solid color-mix(in srgb,var(--article-accent) 20%,white); border-radius:20px; background:linear-gradient(120deg,#fff,var(--article-soft)); }
.article-illustrated-heading small { display:block; color:var(--article-ink); font-size:.7rem; font-weight:900; letter-spacing:.08em; }
.article-content .article-illustrated-heading h2 { margin:.16rem 0 1rem; }
.article-guide-mascot { width:104px; align-self:end; filter:drop-shadow(0 8px 13px rgba(45,50,100,.15)); }
.article-section-heading { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.75rem; }
.article-section-heading > span { width:2.55rem; height:2.55rem; display:grid; place-items:center; border-radius:14px; color:var(--article-ink); background:var(--article-soft); font-size:.7rem; font-weight:950; letter-spacing:.06em; }
.article-example { margin:2rem 0; padding:1.25rem 1.35rem; border:1px solid rgba(120,103,232,.22); border-radius:20px; background:linear-gradient(145deg,#fff,var(--lavender-soft)); }
.article-example h3 { margin:0 0 .45rem; color:var(--lavender-dark); }
.article-check-list { display:grid; gap:.65rem; margin:1rem 0; padding:0; list-style:none; }
.article-check-list > li { position:relative; min-height:48px; margin:0 !important; padding:.72rem .85rem .72rem 3.25rem !important; border:1px solid var(--line); border-radius:14px; background:white; }
.article-check-list > li::before { content:"✓" !important; top:.68rem !important; left:.75rem !important; width:26px !important; height:26px !important; display:grid; place-items:center; border-radius:9px !important; background:var(--lavender-soft) !important; color:var(--lavender-dark); font-weight:950; }
.pitfall-list > li::before { content:"!" !important; display:grid; place-items:center; border-radius:999px !important; background-image:none !important; background:var(--coral-soft) !important; color:#a83246; font-size:.78rem; font-weight:950; }
.check-table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:white; }
.check-table th, .check-table td { padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.check-table tr:last-child th, .check-table tr:last-child td { border-bottom:0; }
.check-table th { width:32%; background:#f6f6fc; font-size:.84rem; }
.article-cta { position:relative; min-height:250px; margin:2.5rem 0; padding:1.5rem 10rem 1.5rem 1.5rem; overflow:hidden; isolation:isolate; border:1px solid rgba(255,128,111,.3); border-radius:24px; background:linear-gradient(145deg,#fff,#fff0ed); box-shadow:0 14px 35px rgba(244,105,114,.09); }
.article-cta > :not(.article-cta-mascot) { position:relative; z-index:1; }
.article-cta-mascot { position:absolute; right:-.35rem; bottom:-.45rem; z-index:0; width:9.25rem; filter:drop-shadow(0 11px 17px rgba(76,45,82,.17)); }
.article-cta-label { color:#a83246; font-size:.74rem; font-weight:900; letter-spacing:.1em; }
.article-cta h2 { margin:.45rem 0 .6rem; font-size:1.35rem; }
.article-cta p { color:#6f5661; }
.article-cta .btn { margin-top:.45rem; }
.ad-note { margin-top:.7rem; color:#65555d; font-size:.78rem; }
.faq-list { display:grid; gap:.75rem; }
.faq-item { border:1px solid var(--line); border-radius:18px; background:white; padding:1rem 1.15rem; }
.faq-item summary { cursor:pointer; font-weight:800; }
.faq-item p { color:var(--muted); margin:.7rem 0 0; }
.source-list { font-size:.82rem; color:var(--muted); }
.source-list > li::before { content:"↗" !important; display:grid; place-items:center; border-radius:7px !important; background-image:none !important; background:var(--cyan-soft) !important; color:#116d79; font-size:.72rem; font-weight:950; }
.source-list a { color:var(--lavender-dark); text-decoration:underline; text-underline-offset:3px; }
.article-tool-callout { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; margin:2rem 0; padding:1.05rem 1.15rem; border:1px solid rgba(68,198,213,.3); border-radius:20px; background:linear-gradient(145deg,#fff,var(--cyan-soft)); }
.article-tool-mascot { width:86px; margin:-1.25rem 0 -1.1rem -.45rem; filter:drop-shadow(0 8px 12px rgba(45,50,100,.15)); }
.article-tool-callout-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:white; background:linear-gradient(145deg,var(--lavender),var(--cyan)); }
.article-tool-callout-icon svg { width:28px; height:28px; }
.article-tool-callout-copy { min-width:0; }
.article-tool-callout-copy small { display:block; color:#116d79; font-weight:850; }
.article-tool-callout-copy strong { display:block; margin:.12rem 0; }
.article-tool-callout-copy span { display:block; color:var(--muted); font-size:.78rem; line-height:1.55; }

.tool-shell { display:grid; grid-template-columns:260px minmax(0,1fr); gap:2rem; align-items:start; }
.tool-sidebar { position:sticky; top:92px; padding:1rem; }
.tool-sidebar a { display:flex; align-items:center; gap:.55rem; padding:.65rem .75rem; border-radius:12px; font-size:.8rem; font-weight:700; color:var(--muted); }
.tool-sidebar-icon { width:22px; height:22px; flex:0 0 auto; }
.tool-sidebar a:hover, .tool-sidebar a.active { background:var(--lavender-soft); color:var(--lavender-dark); }
.tool-workbench { padding:clamp(1.2rem,4vw,2rem); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.field { display:grid; gap:.4rem; }
.field > span { font-size:.8rem; font-weight:800; }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--line); border-radius:13px; padding:.72rem .8rem; background:white; color:var(--ink); }
.field textarea { min-height:130px; resize:vertical; }
.field small { color:var(--muted); }
.result-box { margin-top:1.25rem; padding:1.25rem; border-radius:20px; background:linear-gradient(145deg,var(--lavender-soft),var(--cyan-soft)); }
.result-box h3 { margin:0 0 .5rem; }
.result-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.budget-breakdown { display:grid; gap:.45rem; margin:1rem 0; }
.budget-breakdown div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid rgba(87,68,200,.15); }
.budget-breakdown dt { color:var(--muted); }
.budget-breakdown dd { margin:0; font-weight:900; }
.checklist { display:grid; gap:.65rem; }
.check-row { display:flex; align-items:flex-start; gap:.7rem; padding:.85rem; border:1px solid var(--line); border-radius:14px; background:white; }
.check-row input { margin-top:.35rem; width:18px; height:18px; accent-color:var(--lavender); }
.notice { padding:1rem 1.1rem; border-radius:16px; background:#fff8de; color:#715b13; border:1px solid #f1df9f; font-size:.82rem; }
.status-ok { color:#16815b; }
.status-warn { color:#a65f08; }
.status-error { color:#b33c4c; }

.service-page { display:grid; gap:2rem; }
.service-section { scroll-margin-top:96px; }
.service-section-head { display:grid; grid-template-columns:100px minmax(0,1fr) minmax(0,1fr); align-items:end; column-gap:1.2rem; margin-bottom:1rem; padding:.35rem 1rem .35rem .35rem; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:linear-gradient(120deg,#fff,var(--lavender-soft)); }
.service-section-mascot { width:100px; align-self:end; margin:-.8rem 0 -.55rem; filter:drop-shadow(0 8px 13px rgba(45,50,100,.15)); }
.service-section-head p { margin:0; color:var(--lavender-dark); font-size:.74rem; font-weight:900; letter-spacing:.08em; }
.service-section-head h2 { margin:.25rem 0 0; font-size:1.65rem; }
.service-section-head span { align-self:end; color:var(--muted); font-size:.82rem; }
.service-list { border:1px solid var(--line); border-radius:24px; background:white; overflow:hidden; }
.service-row { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:1.5rem; padding:1.4rem; scroll-margin-top:96px; }
.service-row + .service-row { border-top:1px solid var(--line); }
.service-row.is-focused { background:linear-gradient(90deg,var(--lavender-soft),#fff 52%); box-shadow:inset 5px 0 var(--lavender); }
.service-row h3 { margin:.7rem 0 .35rem; font-size:1.08rem; }
.service-row p { margin:.35rem 0; color:var(--muted); font-size:.82rem; }
.service-checks { display:flex; flex-wrap:wrap; gap:.45rem; margin:.75rem 0 0; padding:0; list-style:none; }
.service-checks li { padding:.32rem .62rem; border-radius:999px; background:var(--cyan-soft); color:#116d79; font-size:.8rem; font-weight:800; }
.service-candidates { padding:1rem; border-radius:16px; background:#f7f8fc; }
.service-candidates > strong { font-size:.84rem; }
.service-candidates ul { display:grid; gap:.6rem; margin:.7rem 0 1rem; padding:0; list-style:none; }
.service-candidates li { display:grid; gap:.08rem; padding-bottom:.55rem; border-bottom:1px solid var(--line); }
.service-candidates li span { font-size:.84rem; font-weight:800; }
.service-candidates li small { font-size:.76rem; font-weight:800; }
.service-candidates .btn { width:100%; font-size:.78rem; }

.admin-shell { min-height:calc(100vh - 70px); display:grid; grid-template-columns:250px minmax(0,1fr); background:#f4f6fb; }
.admin-sidebar { position:sticky; top:70px; height:calc(100vh - 70px); display:flex; flex-direction:column; padding:1rem; background:var(--navy); color:#dce2f5; overflow:auto; }
.admin-brand { display:flex; align-items:center; gap:.7rem; padding:.45rem; color:white; font-weight:900; }
.admin-brand small { display:block; color:#8995b9; font-size:.65rem; letter-spacing:.08em; }
.admin-sidebar nav { display:grid; gap:.3rem; margin-top:1.5rem; }
.admin-sidebar nav button { display:grid; grid-template-columns:25px 1fr auto; align-items:center; gap:.45rem; width:100%; border:0; border-radius:12px; background:transparent; color:#aeb8d4; padding:.7rem .75rem; text-align:left; font-weight:750; cursor:pointer; }
.admin-sidebar nav button:hover,.admin-sidebar nav button.active { background:rgba(255,255,255,.1); color:white; }
.admin-sidebar nav button b { min-width:20px; height:20px; display:grid; place-items:center; border-radius:999px; background:var(--coral); color:white; font-size:.65rem; }
.admin-user { margin-top:auto; display:grid; gap:.25rem; padding:1rem; border:1px solid rgba(255,255,255,.1); border-radius:14px; color:#acb7d4; font-size:.72rem; overflow-wrap:anywhere; }
.admin-user strong { color:white; }
.admin-main { padding:clamp(1rem,3vw,2.2rem); min-width:0; }
.admin-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.admin-top h1 { margin:.15rem 0 0; font-size:1.8rem; }
.admin-toast { margin-bottom:1rem; padding:.8rem 1rem; border:1px solid currentColor; border-radius:12px; background:white; }
.admin-loading { min-height:55vh; display:grid; place-items:center; align-content:center; gap:1rem; padding:2rem; text-align:center; }
.admin-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.admin-stat { display:grid; gap:.3rem; border:1px solid var(--line); border-radius:18px; background:white; padding:1.1rem; text-align:left; color:var(--ink); cursor:pointer; }
div.admin-stat { cursor:default; }
.admin-stat span { color:var(--muted); font-size:.76rem; font-weight:800; }
.admin-stat strong { font-size:1.7rem; line-height:1.2; }
.admin-stat small { color:#8a94ad; }
.admin-panel { margin-top:1rem; border:1px solid var(--line); border-radius:20px; background:white; padding:1.25rem; overflow:hidden; }
.admin-panel h2 { margin:0 0 1rem; font-size:1.12rem; }
.admin-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }
.diagnostic-list { display:grid; gap:.55rem; }
.diagnostic-list p { margin:0; padding:.7rem .8rem; border-radius:10px; background:#f7f8fc; }
.admin-split { display:grid; grid-template-columns:320px minmax(0,1fr); gap:1rem; align-items:start; }
.admin-list { position:sticky; top:92px; border:1px solid var(--line); border-radius:18px; background:white; padding:.75rem; }
.admin-list-scroll { max-height:calc(100vh - 210px); overflow:auto; display:grid; gap:.25rem; margin-top:.65rem; }
.admin-list button { border:0; border-radius:11px; background:transparent; padding:.7rem; text-align:left; cursor:pointer; }
.admin-list button:hover,.admin-list button.active { background:var(--lavender-soft); }
.admin-list button strong { display:block; font-size:.78rem; line-height:1.5; }
.admin-list button small { display:block; margin-top:.2rem; color:var(--muted); font-size:.66rem; }
.admin-editor { border:1px solid var(--line); border-radius:18px; background:white; padding:1.25rem; display:grid; gap:1rem; min-width:0; }
.admin-editor-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.admin-editor-head a { color:var(--lavender-dark); font-size:.76rem; font-weight:800; }
.admin-body-editor { display:grid; gap:1rem; padding:1rem; border:1px solid #dfe3f2; border-radius:16px; background:#f8f9fd; }
.admin-body-editor h2 { margin:0; font-size:1rem; }
.admin-body-editor > div > p { margin:.25rem 0 0; color:var(--muted); font-size:.74rem; }
.admin-depth-section { display:grid; gap:.8rem; min-width:0; margin:0; padding:1rem; border:1px solid var(--line); border-radius:14px; background:white; }
.admin-depth-section legend { padding:0 .4rem; color:var(--lavender-dark); font-size:.76rem; font-weight:850; }
.admin-savebar { position:sticky; bottom:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1rem -.25rem -.25rem; padding:.8rem; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.94); box-shadow:0 12px 35px rgba(26,32,75,.12); backdrop-filter:blur(10px); }
.admin-savebar span { font-size:.76rem; color:var(--muted); font-weight:750; }
.admin-table-wrap { overflow:auto; margin:1rem 0; }
.admin-table-wrap table { width:100%; min-width:620px; border-collapse:collapse; font-size:.76rem; }
.admin-table-wrap th,.admin-table-wrap td { padding:.65rem .7rem; border-bottom:1px solid var(--line); text-align:left; }
.admin-table-wrap th { background:#f7f8fc; color:var(--muted); }
.contact-list { display:grid; gap:.8rem; }
.contact-card { padding:1rem; border:1px solid var(--line); border-radius:15px; background:#fbfcff; }
.contact-card.unread { border-left:4px solid var(--coral); }
.contact-card header,.contact-card footer { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.contact-card header small { display:block; color:var(--muted); overflow-wrap:anywhere; }
.contact-card p { white-space:pre-wrap; overflow-wrap:anywhere; }
.contact-card footer { align-items:center; color:var(--muted); font-size:.7rem; }
.contact-card footer div { display:flex; gap:.45rem; }
.contact-card .btn { min-height:44px; padding:.45rem .75rem; font-size:.72rem; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.setting-row:last-child { border-bottom:0; }
.setting-row p { margin:.2rem 0 0; color:var(--muted); font-size:.76rem; }
.switch { width:64px; height:44px; flex:0 0 auto; border:0; border-radius:999px; background:#cbd1de; padding:4px; cursor:pointer; }
.switch span { display:block; width:36px; height:36px; border-radius:50%; background:white; transition:transform .18s ease; }
.switch.on { background:var(--lavender); }
.switch.on span { transform:translateX(20px); }

@media (max-width: 960px) {
  .hero-grid, .cta-band, .article-layout, .tool-shell { grid-template-columns:1fr; }
  .article-hero-grid { grid-template-columns:1fr; row-gap:.7rem; }
  .article-hero-copy > .pill { grid-column:1; grid-row:1; }
  .article-hero-copy h1 { grid-column:1; grid-row:2; }
  .article-heading-visual { grid-column:1; grid-row:3; width:100%; margin:.35rem 0; }
  .article-hero-summary { grid-column:1; grid-row:4; }
  .article-hero-answer { grid-column:1; grid-row:5; }
  .article-layout { row-gap:1.5rem; }
  .hero-visual { min-height:390px; }
  .path-grid, .tool-grid { grid-template-columns:repeat(2,1fr); }
  .article-grid { grid-template-columns:repeat(2,1fr); }
  .featured-articles { grid-template-columns:1fr; }
  .featured-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .featured-row:nth-child(odd):not(:last-child) { border-right:1px solid var(--line); }
  .featured-row:nth-last-child(-n+2) { border-bottom:0; }
  .category-article-layout { grid-template-columns:1fr; }
  .toc-mobile { display:block; order:1; }
  .toc-mobile a { display:block; min-height:44px; padding:.65rem .2rem; }
  .article-main { order:2; }
  .article-aside { order:3; }
  .toc-desktop { display:none; }
  .article-aside, .tool-sidebar { position:static; }
  .tool-sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cta-band .hero-actions { justify-content:flex-start; }
  .cta-mascot { width:min(250px,70vw); margin:-1.5rem 0 -3rem; }
  .admin-shell { grid-template-columns:1fr; }
  .admin-sidebar { position:static; height:auto; display:block; }
  .admin-sidebar nav { display:flex; overflow-x:auto; padding-bottom:.4rem; }
  .admin-sidebar nav button { min-width:max-content; grid-template-columns:20px 1fr auto; }
  .admin-user { display:none; }
  .admin-stat-grid { grid-template-columns:repeat(2,1fr); }
  .admin-split { grid-template-columns:1fr; }
  .admin-list { position:static; }
  .admin-list-scroll { max-height:300px; }
}
@media (max-width: 720px) {
  .container, .narrow { width:min(100% - 24px, 1160px); }
  .section { padding:58px 0; }
  .desktop-nav { display:none; }
  .mobile-menu { display:block; position:relative; }
  .mobile-menu summary { list-style:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); background:white; border-radius:14px; cursor:pointer; }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .mobile-panel { position:absolute; right:0; top:52px; width:min(290px,calc(100vw - 24px)); display:grid; gap:.25rem; padding:.75rem; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:var(--shadow); }
  .mobile-panel a { padding:.7rem .8rem; border-radius:10px; font-weight:750; }
  .mobile-panel a:hover { background:var(--lavender-soft); }
  .hero { padding-top:44px; }
  .hero h1 { font-size:clamp(2.05rem,11vw,3.05rem); }
  .hero-visual { min-height:320px; border-radius:28px; }
  .cta-mascot { width:180px; }
  .visual-card { padding:.55rem .7rem; font-size:.68rem; }
  .visual-card.two { left:12px; right:auto; top:94px; }
  .visual-card.three { right:12px; bottom:12px; }
  .path-card { min-height:190px; }
  .path-mascot { width:7rem; }
  .path-grid, .article-grid, .tool-grid, .footer-grid, .form-grid { grid-template-columns:1fr; }
  .audience-side-routes, .explorer-controls, .category-directory, .starter-guide-list { grid-template-columns:1fr; }
  .directory-heading { display:grid; gap:.5rem; }
  .category-directory-row:nth-child(odd) { border-right:0; }
  .category-directory-row:nth-last-child(-n+2) { border-bottom:1px solid var(--line); }
  .category-directory-row:last-child { border-bottom:0; }
  .featured-list, .article-results { grid-template-columns:1fr; }
  .featured-row:nth-child(odd):not(:last-child) { border-right:0; }
  .featured-row:nth-last-child(-n+2) { border-bottom:1px solid var(--line); }
  .featured-row:last-child { border-bottom:0; }
  .article-category-head { grid-template-columns:auto minmax(0,1fr); }
  .article-category-count { grid-column:2; justify-self:start; }
  .article-category-mascot { width:76px; height:76px; margin:-.75rem 0 -.45rem; }
  .category-directory-mascot { width:64px; height:64px; }
  .article-row-link { min-height:76px; }
  .article-page-hero { padding:34px 0 18px; }
  .illustrated-page-hero { min-height:auto; display:grid; grid-template-columns:minmax(0,1fr) 112px; align-items:end; gap:.65rem; padding-right:0; overflow:hidden; }
  .illustrated-page-hero .breadcrumb { grid-column:1/-1; }
  .illustrated-page-hero-copy { grid-column:1; min-width:0; }
  .page-hero-mascot { position:static; grid-column:2; width:112px; align-self:end; justify-self:end; margin-bottom:-8px; }
  .page-hero h1 { font-size:1.95rem; }
  .page-hero p { font-size:1rem; line-height:1.85; }
  .article-layout { padding-top:12px; padding-bottom:48px; }
  .article-content { font-size:1rem; line-height:1.9; letter-spacing:.015em; }
  .article-content h2 { margin:2.7rem 0 1rem; font-size:1.38rem; line-height:1.5; }
  .article-content h3 { margin:2rem 0 .75rem; font-size:1.12rem; }
  .article-content p { margin:1rem 0; }
  .article-content .article-at-a-glance-head h2 { margin:.1rem 0 0; font-size:1.25rem; }
  .article-content .glance-card p { margin:.28rem 0 0; font-size:.82rem; line-height:1.65; }
  .article-content .article-cta h2 { margin:.45rem 0 .6rem; font-size:1.35rem; }
  .article-content .faq-item p { margin:.7rem 0 0; }
  .article-introduction { gap:.75rem; margin-bottom:2.2rem; font-size:1rem; line-height:1.9; }
  .article-at-a-glance-grid { grid-template-columns:1fr; }
  .article-at-a-glance-head { min-height:76px; padding-right:5.5rem; }
  .article-glance-mascot { top:0; right:-.1rem; width:6.1rem; }
  .glance-card { min-height:auto; padding:1rem 1rem 1rem 3.4rem; }
  .glance-card > span { top:1rem; left:1rem; }
  .article-introduction .reading-paragraph { margin:0; padding:1rem 1rem 1rem 3.75rem; }
  .article-introduction .reading-paragraph::before { left:.85rem; top:.9rem; }
  .article-detail-section { margin-top:2.4rem; }
  .article-reading-break { grid-template-columns:78px minmax(0,1fr); min-height:68px; gap:.5rem; margin:.9rem 0 0; }
  .article-reading-break.is-right { grid-template-columns:minmax(0,1fr) 78px; }
  .article-reading-break + .article-detail-section { margin-top:.8rem; }
  .article-reading-mascot { width:78px; }
  .article-reading-trail::before { width:3.2rem; }
  .article-illustrated-heading { grid-template-columns:minmax(0,1fr) 84px; gap:.6rem; margin-top:2.6rem; padding:.9rem .8rem 0 1rem; }
  .article-content .article-illustrated-heading h2 { margin:.12rem 0 .85rem; font-size:1.3rem; }
  .article-guide-mascot { width:84px; }
  .article-section-heading { gap:.6rem; }
  .article-section-heading > span { width:2.3rem; height:2.3rem; border-radius:12px; }
  .article-tool-callout { grid-template-columns:auto minmax(0,1fr); }
  .article-tool-callout .btn { grid-column:1/-1; }
  .article-tool-mascot { width:76px; margin:-1rem 0 -.85rem -.35rem; }
  .article-cta { min-height:230px; padding:1.25rem 7.2rem 1.25rem 1.25rem; }
  .article-cta-mascot { right:-.5rem; width:7.4rem; }
  .service-section-head { grid-template-columns:82px minmax(0,1fr); align-items:center; padding:.35rem .8rem .35rem .2rem; }
  .service-section-mascot { width:82px; }
  .service-section-head span { grid-column:1/-1; margin:.2rem 0 .55rem; padding:0 .6rem; }
  .service-row { grid-template-columns:1fr; }
  .service-row { gap:1rem; padding:1rem; }
  .result-actions .btn { flex:1 1 220px; }
  .check-table th, .check-table td { display:block; width:100%; }
  .check-table th { border-bottom:0; padding-bottom:.3rem; }
  .check-table td { padding-top:.3rem; }
  .footer-grid { gap:1.6rem; }
  .admin-stat-grid { grid-template-columns:1fr; }
  .admin-main { padding:.8rem; }
  .admin-top { align-items:flex-end; }
  .admin-editor-head,.admin-savebar,.contact-card header,.contact-card footer { align-items:stretch; flex-direction:column; }
  .admin-savebar .btn { width:100%; }
  .contact-card footer div { display:flex; flex-wrap:wrap; }
  .contact-card footer .btn { flex:1 1 96px; }
}
@media (max-width: 520px) {
  .article-heading-visual { border-radius:22px; }
  .tool-sidebar { grid-template-columns:1fr; }
  .featured-lead-icon { width:58px; height:58px; border-radius:18px; }
  .featured-lead-icon svg { width:34px; height:34px; }
  .article-category-block { border-radius:22px; }
  .article-category-head { gap:.55rem; }
  .article-category-mascot { width:66px; height:66px; }
  .article-category-icon { width:48px; height:48px; }
  .article-category-heading p { font-size:.73rem; }
  .article-row-link { grid-template-columns:auto minmax(0,1fr) auto; gap:.65rem; padding:.7rem .65rem; }
  .article-row-icon { width:36px; height:36px; }
  .article-row-copy small { font-size:.68rem; }
  .related-article-row { grid-template-columns:auto minmax(0,1fr) auto; gap:.65rem; }
  .related-article-icon { display:none; }
  .related-article-copy > span { font-size:.69rem; }
  .illustrated-page-hero { grid-template-columns:minmax(0,1fr) 92px; }
  .page-hero-mascot { width:92px; }
  .article-cta { min-height:0; padding:1.15rem 1.15rem 6.7rem; }
  .article-cta-mascot { right:-.2rem; width:7rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }

.tools-home{background:linear-gradient(180deg,rgba(239,236,255,.45),rgba(231,249,251,.4))}.brand-inline svg{width:1.2em;height:1.2em}.contact-field{margin-top:1rem}[data-contact-form] .btn{margin-top:1rem}

main:has(> .service-page) .illustrated-page-hero-copy h1 { text-wrap:balance; }