/* Standalone advertising preview. No selectors or scripts are injected into WordPress. */
:root{--ink:#1e1e1e;--navy:#1c3048;--blue:#0878b2;--sky:#56b6df;--yellow:#ffe600;--cream:#fdf8ec;--coral:#ff675f;--tools-height:155px;color:var(--ink);font-family:Inter,"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}
*{box-sizing:border-box}html{scroll-padding-top:calc(var(--tools-height) + 20px)}body{margin:0;background:var(--cream);font-size:16px;line-height:1.85}body.modal-open{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a{color:var(--blue);text-underline-offset:4px}button,a{transition:background-color .15s,box-shadow .15s}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button:hover{filter:brightness(1.06)}[hidden]{display:none!important}img{max-width:100%;height:auto;display:block}.skip{position:fixed;left:16px;top:-100px;z-index:100;background:#fff;padding:12px}.skip:focus{top:8px}
/* Demo controls and the type-1 sidebar follow; type 2 remains in normal flow. */
.demo-tools{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;padding:10px max(20px,calc((100vw - 1600px)/2));border-bottom:4px solid var(--yellow)}.tools-title,.tools-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px}.tools-title p{display:flex;align-items:center;gap:10px;margin:0}.tools-title strong{font-size:17px}.demo-badge{font-size:10px;letter-spacing:.14em;font-weight:900;background:var(--yellow);color:var(--ink);padding:1px 9px;border-radius:4px}.back-link{font-size:12px;color:#fff}.tools-bottom{margin-top:8px}.type-switch{display:flex;gap:8px}.type-switch button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #ffffff80;border-radius:8px;padding:7px 20px;background:transparent;color:#fff;font-weight:800;font-size:14px;min-height:44px}.type-switch b{font-size:18px}.type-switch button[aria-pressed=true]{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.demo-tools :focus-visible{outline-color:var(--yellow)}.replay{background:#fff;color:var(--navy);border:0;border-radius:7px;font-size:12px;font-weight:800;padding:8px 16px;min-height:44px;white-space:nowrap}.mode-help{font-size:12px;line-height:1.5;color:#e2eaf2;margin:7px 0 0}
/* Current media-site shell: course banner, white header and bold navigation. */
.diagnosis{position:relative;background:#078abc radial-gradient(#fff2 1px,transparent 1px) 0 0/14px 14px;color:#fff;border-bottom:4px solid var(--ink);overflow:hidden}.diagnosis::before,.diagnosis::after{content:"";position:absolute;border-radius:50%;width:160px;height:160px;pointer-events:none}.diagnosis::before{background:#ff9514;bottom:-108px;left:0}.diagnosis::after{background:#ff7dbb;right:-10px;top:-110px}.diagnosis-in{position:relative;z-index:1;max-width:1240px;margin:auto;display:flex;align-items:center;gap:26px;padding:10px 44px 10px 20px;min-height:94px}.diagnosis-brand{background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:9px;box-shadow:4px 4px var(--ink);padding:10px;transform:rotate(-2deg);width:184px;flex-shrink:0;text-align:center}.diagnosis-brand img{width:160px;margin:0 auto 4px}.diagnosis-brand>span{display:block;font-size:10px;font-weight:900;white-space:nowrap}.diagnosis-copy>span{display:table;border:2px solid var(--navy);border-radius:99px;background:#ffdeed;color:var(--ink);padding:0 12px;font-size:12px;font-weight:900}.diagnosis-copy strong{display:block;font-size:clamp(17px,1.8vw,25px);line-height:1.4;margin-top:4px;font-weight:900}.diagnosis-copy em{font-style:normal;color:#fff476}.diagnosis-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-left:auto;background:var(--yellow);border:3px solid var(--navy);border-radius:14px;box-shadow:4px 5px var(--navy);padding:14px 24px;font-weight:900;font-size:20px;white-space:nowrap;color:var(--ink)}.diagnosis-cta span{font-size:28px;line-height:1}.close{position:relative;border:2px solid var(--ink);border-radius:50%;background:#fff;width:44px;height:44px;flex:0 0 44px;padding:0;display:block}.close::before,.close::after{content:"";position:absolute;width:19px;height:2px;background:var(--navy);top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}.close::after{transform:translate(-50%,-50%) rotate(-45deg)}.close:hover{background:var(--yellow)}.diagnosis-close{position:absolute;right:0;top:3px;transform:scale(.72);transform-origin:top center}
.site-head{background:#fff;border-bottom:3px solid var(--ink)}.head-top{display:flex;align-items:center;gap:14px;max-width:1640px;margin:auto;padding:14px 20px}.brand{background:none;border:0;padding:0;width:360px;max-width:40%;flex-shrink:0}.brand img{width:100%}.socials{display:flex;gap:7px;align-items:center}.socials>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ededed;font-size:17px;font-weight:900;line-height:1}.socials>span:nth-child(3){font-size:12px}.socials .line-icon{font-size:7px}.search{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;margin-left:auto;background:#fff;flex-shrink:0}.search svg{width:20px;fill:none;stroke:currentColor;stroke-width:2}.head-cta{background:var(--coral);color:#fff;font-weight:900;border:3px solid var(--ink);border-radius:99px;padding:11px 23px;font-size:14px;white-space:nowrap}.short{display:none}.head-main{border-top:1px solid #ddd;max-width:1640px;margin:auto;padding:7px 40px}.gnav{display:flex}.gnav button{flex:1;border:0;border-left:1px solid #d7d3c5;border-radius:8px;background:#fff;font-size:16px;font-weight:900;padding:15px 8px;white-space:nowrap}.gnav button:last-child{border-right:1px solid #d7d3c5}.gnav span{color:#777}.burger,.mobile-socials{display:none}
/* Blue article hero matches the production article, without decorative circles. */
.article-hero{background:var(--blue);color:#fff;border-bottom:7px solid var(--yellow)}.hero-in{max-width:1640px;margin:auto;padding:48px 20px 56px;display:grid;grid-template-columns:minmax(0,1080px) minmax(300px,1fr);gap:40px;align-items:center}.article-cover{aspect-ratio:16/9;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#202020;border:5px solid #fff;border-radius:34px;box-shadow:16px 18px var(--navy);padding:5%;overflow:hidden;container-type:inline-size}.cover-copy{min-width:0;position:relative;z-index:1}.cover-copy small{font:800 clamp(8px,1vw,13px) Inter,sans-serif;color:var(--sky);letter-spacing:.1em}.cover-copy strong{display:block;font-size:clamp(26px,4vw,65px);line-height:1.35;letter-spacing:-.04em;margin:20px 0;color:#fff;font-weight:900;white-space:nowrap}.cover-copy>span{font-size:clamp(11px,1.3vw,20px);font-weight:900;background:var(--yellow);padding:4px 9px;color:var(--ink)}.synth{width:42%;flex-shrink:0;background:var(--navy);border:3px solid #111;border-radius:15px;padding:6%;box-shadow:7px 7px var(--sky);transform:rotate(-6deg)}.synth-top{display:flex;justify-content:space-between;color:white;font:900 clamp(11px,1.5vw,21px) Inter,sans-serif}.synth-top span{font-size:8px;color:var(--yellow)}.synth-screen{height:70px;margin:20px 0;background:var(--yellow);border-radius:4px;display:flex;align-items:center;overflow:hidden}.synth-screen i{height:80%;width:100%;background:repeating-linear-gradient(90deg,transparent 0 5px,var(--navy) 5px 8px,transparent 8px 13px);clip-path:polygon(0 45%,10% 40%,20% 0,30% 40%,40% 15%,50% 45%,60% 0,70% 40%,80% 20%,90% 45%,100% 40%,100% 60%,90% 55%,80% 80%,70% 60%,60% 100%,50% 55%,40% 85%,30% 60%,20% 100%,10% 60%,0 55%)}.synth-knobs{display:flex;justify-content:space-between;margin-bottom:20px;gap:6px}.synth-knobs i{width:27px;aspect-ratio:1;background:var(--coral);border:3px solid #fff;border-radius:50%}.keys{height:60px;background:repeating-linear-gradient(90deg,#fff 0 18px,#202020 18px 20px);border-radius:3px}.hero-caption{min-width:0}.kind{display:inline-block;background:#fff;color:var(--blue);border-radius:6px;padding:4px 12px;font-size:13px;font-weight:900;letter-spacing:.05em}.hero-caption h1{font-size:clamp(25px,2vw,32px);font-weight:900;line-height:1.45;letter-spacing:-.02em;margin:18px 0 22px}.article-meta{border-left:3px solid var(--yellow);padding-left:14px;font-size:12px}.article-meta>span{display:inline-block;border-radius:99px;background:var(--yellow);color:var(--ink);padding:3px 12px;font-weight:900}.article-meta p{margin:8px 0 0}.read-article{display:inline-block;margin-top:22px;color:#fff;font-size:14px;font-weight:900}
/* Same 1640px canvas, 300px sidebar and white bordered section cards. */
.article-layout{max-width:1640px;margin:0 auto;padding:24px 20px 70px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}.article-main{min-width:0}.breadcrumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:2px solid #d9d5ca;border-radius:99px;padding:8px 16px;font-size:12px;font-weight:700;line-height:1.6;margin-bottom:24px}.breadcrumb span:first-child{color:var(--blue)}.breadcrumb i{color:#a5a49e;font-style:normal}.article-body{font-size:18px;line-height:1.9}.h2card{background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:9px 9px var(--ink);padding:26px 32px 12px;margin-bottom:30px;scroll-margin-top:20px}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:900;color:var(--blue);margin:0 0 14px}.h2card h2{font-size:28px;line-height:1.5;font-weight:900;margin:0 0 24px;letter-spacing:-.025em}.h2card h2>span,.sidebar-editorial h2>span{background:linear-gradient(transparent 65%,var(--yellow) 65%);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 3px}.h2card>p:not(.eyebrow){margin:20px 0 28px}.demo-disclaimer{padding:18px 22px;border:2px solid #a8d6e8;border-radius:15px;background:#e2f4fb;font-size:14px;line-height:1.8}.contents-box{display:grid;background:var(--cream);border:2px solid var(--ink);border-radius:15px;padding:18px 24px;margin-bottom:22px}.contents-box strong{font-size:18px;margin-bottom:8px}.contents-box a{display:flex;align-items:center;gap:12px;text-decoration:none;border-top:1px solid #dbd7ca;padding:10px 0;font-size:15px;font-weight:700}.contents-box a b{color:#747467;font-size:13px}.contents-box a span{margin-left:auto}.lesson-note{background:#e2f4fb;border:2px solid var(--blue);border-radius:18px;padding:28px}.lesson-note>b{font-size:11px;color:var(--blue);letter-spacing:.15em}.lesson-note strong{display:block;font-size:30px;line-height:1.5;margin-top:12px;font-weight:900}.wave-bars{display:flex;height:70px;gap:8px;align-items:center;justify-content:center;margin-top:24px}.wave-bars i{width:10px;height:24px;background:var(--blue);border-radius:3px}.wave-bars i:nth-child(3n){height:64px;background:var(--coral)}.wave-bars i:nth-child(3n+1){height:42px}.sample-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.sample-tips>div{padding:18px;border:2px solid var(--ink);border-radius:12px;background:var(--cream)}.sample-tips b{color:var(--blue);font-size:36px;font-weight:900;line-height:1}.sample-tips h3{font-size:19px;margin:8px 0}.sample-tips p{font-size:15px;margin:0}.article-body blockquote{margin:24px 0;background:#e2f4fb;border-left:5px solid var(--blue);padding:24px;font-weight:800;font-size:21px}.article-end{text-align:center;padding:32px 24px}.article-end h2{font-size:26px}.return-cta{display:inline-flex;align-items:center;gap:32px;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:99px;box-shadow:4px 5px var(--ink);font-size:16px;font-weight:900;padding:13px 26px;text-decoration:none}.return-cta:hover{background:#fff176}
.article-sidebar{padding-top:78px;min-width:0;display:flex;flex-direction:column;gap:26px}.placement-label{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:900;letter-spacing:.1em;line-height:1.5;color:#77776d;margin:0 0 8px}.placement-label span{font-size:9px;font-weight:700;letter-spacing:0}.sidebar-slot{width:300px;max-width:100%}.site-banner button{border:0;padding:0;background:transparent}.site-banner img{border-radius:12px}.sidebar-editorial,.sidebar-lesson{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px var(--ink);padding:20px}.sidebar-editorial .eyebrow{font-size:10px}.sidebar-editorial h2{font-size:18px;line-height:1.5;margin:0 0 12px;font-weight:900}.sidebar-editorial>div{display:flex;gap:13px;align-items:start;border-bottom:1px solid #ddd;padding:14px 0}.sidebar-editorial>div:last-child{border:0;padding-bottom:0}.sidebar-editorial b{width:28px;flex-shrink:0;font-size:20px;line-height:1.4;background:var(--yellow);text-align:center;border:2px solid var(--ink);border-radius:6px}.sidebar-editorial div p{font-size:13px;font-weight:700;margin:0}.sidebar-lesson{background:var(--cream)}.sidebar-lesson strong{display:block;font-size:18px;font-weight:900;line-height:1.6}.sidebar-lesson p:not(.eyebrow){font-size:13px;color:#666}.sidebar-lesson button{background:var(--coral);color:#fff;border:2px solid var(--ink);border-radius:99px;font-size:14px;padding:10px;width:100%;font-weight:900}.inline-slot{margin:0 0 30px;text-align:center}.inline-slot>.placement-label{max-width:300px;margin-inline:auto}.inline-slot:has(#inline-creative:empty){display:none}.inline-slot .creative-side{margin:auto}
.site-footer{background:#fff;border-top:4px solid var(--ink);padding:42px 20px 24px}.footer-in{max-width:1400px;margin:auto;display:flex;gap:70px;align-items:start;justify-content:space-between}.footer-brand img{width:280px}.footer-brand p{font-size:22px;line-height:1.6;font-weight:900;margin:20px 0 12px}.footer-brand p span{display:block}.footer-brand small{font-size:13px;color:#666}.footer-links{display:flex;gap:60px}.footer-links>div{display:flex;flex-direction:column;gap:12px;font-size:14px}.footer-links strong{font-size:17px;border-bottom:5px solid var(--yellow);padding-bottom:4px;margin-bottom:4px}.footer-links span{color:#666}.footer-links a{font-weight:700}.footer-note{text-align:center;color:#6d6d63;font-size:12px;margin:36px 0 16px}.copyright{text-align:center;border-top:1px solid #ddd;padding-top:20px;font-size:12px;margin:0}.copyright span{margin-left:12px;font-size:10px;letter-spacing:.15em;color:var(--blue);font-weight:900}
/* Fictional creatives; exact nominal sizes at desktop, proportional on small screens. */
.creative{position:relative;overflow:hidden;background:var(--navy);color:#fff;border:0;text-align:left;isolation:isolate;padding:20px;border-radius:12px;font-family:inherit}.creative::before{content:"";position:absolute;background:var(--yellow);opacity:.12;width:240px;height:240px;border-radius:50%;right:-95px;top:15px;z-index:-1}.creative:hover{box-shadow:0 0 0 3px var(--blue)}.creative>small{display:block;color:#f8e875;font-size:9px;font-weight:700;letter-spacing:.06em}.product-name{display:block;font-weight:900;font-size:49px;line-height:1;letter-spacing:-.06em;margin:12px 0 7px}.product-copy{display:block;font-size:13px;font-weight:800}.creative-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--yellow);color:var(--ink);padding:7px 13px;border:2px solid var(--ink);border-radius:6px;font-size:12px;font-weight:900;line-height:1.5}.creative-side{width:300px;max-width:100%;height:250px;display:flex;flex-direction:column;align-items:start}.creative-side .creative-cta{margin-top:auto;width:100%}.mini-synth{display:flex;justify-content:space-evenly;align-items:center;background:var(--sky);border:2px solid #111;border-radius:8px;height:44px;min-height:32px;width:170px;margin:12px 0;box-shadow:4px 4px #0004}.mini-synth i{width:22px;height:22px;background:var(--navy);border:3px solid #fff;border-radius:50%}.top-slot{position:static;max-width:1000px;margin:0 auto 26px;container-type:inline-size}.creative-wide{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;aspect-ratio:25/3;padding:2% 3.6%}.creative-wide::before{right:16%;width:180px;height:180px;top:-100px}.wide-brand small{display:block;font-size:clamp(6px,1cqw,10px);color:#f8e875}.wide-brand strong{font-size:clamp(18px,4.5cqw,45px);letter-spacing:-.06em;line-height:1.3}.wide-brand strong span{display:block;font-size:clamp(5px,1cqw,10px);letter-spacing:.1em}.wide-copy{font-size:clamp(10px,2.5cqw,25px);font-weight:900;line-height:1.4}.creative-wide .creative-cta{font-size:clamp(7px,1.5cqw,15px);white-space:nowrap;gap:8px;padding:1% 2%;background:#fff;flex-shrink:0}.small-only{display:none}
dialog{border:0;padding:0;background:transparent;color:var(--ink);width:512px;max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow-y:auto}dialog::backdrop{background:#152232db}.float-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#fff;font-size:13px;font-weight:700;margin-bottom:12px}.creative-float{display:flex;flex-direction:column;align-items:center;text-align:center;width:480px;height:320px;max-width:100%;margin:0 auto;padding:26px}.creative-float::before{width:320px;height:320px;right:-120px;top:55px}.creative-float>small{font-size:11px}.creative-float .product-name{font-size:76px;margin:12px 0}.creative-float .product-copy{font-size:18px}.creative-float .mini-synth{margin:12px 0;height:42px;flex-shrink:0}.creative-float .creative-cta{width:260px;max-width:100%;margin-top:auto;font-size:14px}.float-note{text-align:center;color:#fff;font-size:11px;line-height:1.7;margin:12px 0 0}.click-message{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);z-index:100;border:2px solid var(--ink);border-radius:10px;background:var(--yellow);padding:14px 20px;font-size:14px;font-weight:800;box-shadow:4px 4px var(--ink)}dialog .click-message{position:static;transform:none;margin:12px auto 0;max-width:100%;font-size:12px}.noscript-note{margin:0;background:var(--yellow);padding:16px;font-size:14px}
@media(max-width:1199px){.desktop-socials{display:none}.diagnosis-in{gap:18px}.diagnosis-cta{font-size:16px;padding:12px}.diagnosis-copy strong{font-size:20px}.gnav button{font-size:13px}.synth-screen{height:50px}.keys{height:40px}.synth-knobs{margin-bottom:14px}.synth-knobs i{width:22px}.synth{padding:4%}}
@media(max-width:1059px){.article-layout{display:block;max-width:1080px}.article-sidebar{display:none}.hero-in{display:block;max-width:1080px;padding-top:28px;padding-bottom:38px}.hero-caption{margin-top:28px}.hero-caption h1{font-size:28px}.article-cover{box-shadow:9px 10px var(--navy)}.cover-copy strong{font-size:clamp(26px,6vw,62px)}.synth-screen{height:80px}.synth{padding:5%}.keys{height:70px}.diagnosis-brand{width:160px}.diagnosis-copy strong{font-size:18px}.diagnosis-cta{font-size:14px;gap:10px}.diagnosis-in{padding-right:40px}.diagnosis-close{right:4px}.head-main{padding:7px 20px}}
@media(max-width:759px){
 .demo-tools{padding:8px 14px}.tools-title{gap:8px}.tools-title p{gap:7px}.tools-title strong{font-size:13px}.demo-badge{font-size:9px;padding:1px 6px}.back-link{font-size:11px;white-space:nowrap}.back-link span{display:none}.tools-bottom{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:6px}.type-switch{grid-column:1/-1;gap:6px}.type-switch button{padding:6px 3px;flex:1;gap:5px;font-size:11px;min-height:44px}.type-switch b{font-size:16px}.replay{grid-column:2;font-size:11px;min-height:34px;padding:6px 9px}.mode-help{font-size:10px;line-height:1.5;margin-top:5px}.demo-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.tools-title{width:100%}.tools-bottom{display:contents}.type-switch{width:100%}.mode-help{flex:1;margin:0;min-width:0;order:3}.replay{order:4;min-width:0}
 .diagnosis-in{padding:10px 24px 10px 12px;display:grid;grid-template-columns:100px 1fr;gap:6px 10px;min-height:100px}.diagnosis-brand{width:100px;padding:8px 5px;grid-row:1/3;border-radius:7px;align-self:center}.diagnosis-brand>span{font-size:6px}.diagnosis-brand img{margin-bottom:8px}.diagnosis-copy>span{font-size:9px;padding:0 7px;line-height:1.6}.diagnosis-copy strong{font-size:12px;margin-top:3px;line-height:1.4}.diagnosis-copy em{display:inline}.diagnosis-cta{font-size:11px;border-width:2px;border-radius:9px;padding:6px 10px;min-height:32px;box-shadow:2px 3px var(--navy);margin:0;gap:4px;width:100%}.diagnosis-cta span{font-size:20px}.diagnosis-close{right:0;top:0;transform:scale(.6);transform-origin:top right}.diagnosis::after{right:-70px}.head-top{padding:12px;gap:9px}.brand{width:auto;max-width:none;flex:1;min-width:0}.brand img{max-width:360px}.search{width:34px;height:34px;margin-left:0}.search svg{width:16px}.head-cta{font-size:11px;border-width:2px;padding:7px 10px}.long{display:none}.short{display:inline}.gnav{display:none}.head-main{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;gap:14px}.burger{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--ink);border-radius:99px;padding:4px 13px;font-weight:900;font-size:15px;min-height:40px}.burger>span{font-size:24px;line-height:1}.mobile-socials{display:flex;gap:6px}.socials>span{width:26px;height:26px;font-size:16px}.socials>span:nth-child(3){font-size:10px}.socials .line-icon{font-size:6px}
 .hero-in{padding:20px 20px 32px}.article-cover{padding:5%;border-radius:22px;border-width:4px;gap:12px}.cover-copy strong{font-size:clamp(22px,5.4vw,38px);margin:12px 0}.cover-copy small{font-size:7px;letter-spacing:.03em}.cover-copy>span{font-size:10px;padding:3px 6px}.synth{border-width:2px;border-radius:8px;padding:4%;box-shadow:4px 4px var(--sky);width:39%}.synth-screen{height:38px;margin:10px 0}.synth-top{font-size:10px}.synth-top span{font-size:5px}.synth-knobs{gap:3px;margin-bottom:10px}.synth-knobs i{width:17px;border-width:2px}.keys{height:30px;background:repeating-linear-gradient(90deg,#fff 0 11px,#202020 11px 13px)}.hero-caption{margin-top:25px}.kind{font-size:12px}.hero-caption h1{font-size:25px;margin:15px 0 18px}.article-meta{padding-left:11px;font-size:11px}.read-article{font-size:13px;margin-top:18px}.article-layout{padding:20px 16px 40px}.breadcrumb{font-size:10px;gap:6px;padding:9px 12px;line-height:1.8;margin-bottom:24px;border-radius:15px}.article-body{font-size:16px;line-height:1.9}.h2card{padding:20px 16px 12px;border-radius:16px;box-shadow:5px 5px var(--ink);margin-bottom:26px}.h2card h2{font-size:23px;margin-bottom:20px}.eyebrow{font-size:10px;margin-bottom:10px}.h2card>p:not(.eyebrow){margin:16px 0 22px}.demo-disclaimer{padding:14px;font-size:12px}.contents-box{padding:14px;font-size:14px}.contents-box a{font-size:13px;gap:9px}.contents-box strong{font-size:16px}.lesson-note{padding:18px}.lesson-note strong{font-size:23px}.wave-bars{gap:6px}.sample-tips{grid-template-columns:1fr}.sample-tips>div{display:grid;grid-template-columns:32px 1fr;gap:5px 12px;padding:16px}.sample-tips b{grid-row:1/3;font-size:30px}.sample-tips h3{margin:0;font-size:17px}.sample-tips p{grid-column:2;font-size:14px}.article-body blockquote{font-size:17px;padding:18px}.article-end{padding:26px 16px}.return-cta{gap:14px;padding:12px 18px;font-size:14px}.inline-slot .creative-side{width:min(300px,100%)}.top-slot{margin-bottom:22px}.creative-wide{gap:8px;padding:2% 3%;border-radius:8px}.creative-wide .creative-cta{border-width:1px;border-radius:4px}.wide-copy{font-size:clamp(9px,2.5cqw,18px)}.wide-brand strong span{letter-spacing:0}.creative-wide::before{width:100px;height:100px;top:-65px;right:20%}
 .site-footer{padding:30px 20px 22px}.footer-in{display:block}.footer-brand img{width:240px}.footer-brand p{font-size:18px}.footer-brand p span{white-space:nowrap}.footer-links{margin-top:28px;gap:24px;flex-wrap:wrap}.footer-links>div{font-size:12px;gap:8px;flex:1;min-width:130px}.footer-links strong{font-size:14px}.footer-note{font-size:11px;text-align:left;margin-top:28px}.copyright{font-size:11px}.copyright span{display:block;margin:6px 0 0}
 .creative-float{width:100%;height:auto;aspect-ratio:3/2;padding:18px}.creative-float .product-name{font-size:53px;margin:10px 0}.creative-float .product-copy{font-size:14px}.creative-float>small{font-size:9px}.creative-float .mini-synth{display:none}.creative-float .creative-cta{width:220px;font-size:12px;margin-top:auto}.float-heading{font-size:12px}.float-note{font-size:10px}.click-message{font-size:12px;padding:12px 15px}
}
@media(max-width:359px){.tools-title strong{font-size:12px}.type-switch button{font-size:10px}.replay{font-size:10px;padding:5px}.mode-help{font-size:9px}.head-top{gap:6px}.search{width:30px;height:30px}.head-cta{font-size:10px;padding:6px 8px}.head-main{padding-inline:12px;gap:8px}.burger{font-size:13px;padding:3px 10px}.mobile-socials{gap:4px}.socials>span{width:24px;height:24px}.cover-copy strong{font-size:20px}.cover-copy small{font-size:6px}.hero-caption h1{font-size:23px}.article-layout{padding-inline:12px}.h2card{padding-inline:12px}.footer-brand p{font-size:16px}.creative-float{padding:14px}.creative-float .product-name{font-size:45px}.creative-float .product-copy{font-size:12px}}
/* Keep the three-line brand inside even the proportionally scaled upper creative. */
.wide-brand{line-height:1}.wide-brand small{font-size:clamp(4px,1cqw,10px);line-height:1;margin-bottom:1px}.wide-brand strong{display:block;font-size:clamp(14px,4.5cqw,45px);line-height:1}.wide-brand strong span{font-size:clamp(4px,1cqw,10px);line-height:1;margin-top:1px}.creative-wide{padding-block:1.2%}
/* Internal gutter keeps the keyboard focus ring circular and unclipped. */
dialog{width:528px;max-width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:8px}
@media(prefers-reduced-motion:reduce){button,a{transition:none!important}}

/* Demonstration-only locators. Ad geometry and the unhighlighted creative remain unchanged. */
:root{--guide-orange:#f58b00;--guide-pale:#fff3c9}
.guide-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #ffffff90;border-radius:7px;background:transparent;color:#fff;font-size:12px;font-weight:800;padding:8px 14px;min-height:44px;margin-left:auto;white-space:nowrap}
.guide-toggle[aria-pressed=true]{background:var(--guide-pale);color:var(--ink);border-color:var(--guide-orange)}
.guide-toggle::before{content:"";width:8px;height:8px;background:#bbc6d3;border-radius:50%;flex-shrink:0}
.guide-toggle[aria-pressed=true]::before{background:#d86800;box-shadow:0 0 0 3px #f58b0028}
.guide-notice{display:block;margin-top:5px;color:#f4dbac;font-size:10px;line-height:1.5}
.ad-guide{display:none}.ad-highlight .ad-guide{display:flex;align-items:center;gap:9px;position:relative;max-width:100%;width:fit-content;padding:9px 12px;margin:0 0 22px;background:var(--guide-pale);color:var(--ink);border:2px solid var(--guide-orange);border-radius:10px;line-height:1.4;text-align:left}
.ad-guide::after{content:"";position:absolute;left:23px;bottom:-10px;width:15px;height:15px;background:var(--guide-pale);border-right:2px solid var(--guide-orange);border-bottom:2px solid var(--guide-orange);transform:rotate(45deg)}
.ad-guide-index{display:grid;place-items:center;flex:0 0 28px;height:28px;border:2px solid var(--ink);border-radius:7px;background:var(--yellow);font-size:18px;line-height:1;font-weight:900}
.ad-guide strong{display:block;font-size:13px;font-weight:900;line-height:1.5;white-space:nowrap}
.ad-guide span{display:block;font-size:10px;font-weight:600;line-height:1.6;margin-top:2px}
.ad-highlight :is(.sidebar-slot,.inline-slot,.top-slot)>.placement-label{display:none}
.ad-highlight [data-sample-ad]{outline:4px solid var(--guide-orange);outline-offset:3px;box-shadow:0 0 0 10px #f58b0026}
.ad-highlight [data-sample-ad]:focus-visible{outline-color:var(--blue);box-shadow:0 0 0 11px #f58b00bb}
.ad-highlight .ad-pulse{animation:ad-locator-pulse 1.35s ease-out 3}
@keyframes ad-locator-pulse{0%,100%{box-shadow:0 0 0 10px #f58b0026}50%{box-shadow:0 0 0 12px #f58b0060,0 0 26px 5px #f58b0045}}
.inline-slot>.ad-guide{margin-inline:auto;min-width:min(300px,100%)}
.inline-slot .ad-guide::after{left:calc(50% - 8px)}
.float-heading{gap:8px}.float-heading>span{flex:1;min-width:0}
.float-guide-toggle{font-size:10px;padding:6px 8px;margin-left:0;min-height:36px;flex-shrink:0;gap:5px}
dialog>.ad-guide{width:480px;max-width:100%;margin-inline:auto}
/* Room around the creative prevents the ring from being cut by dialog scrolling. */
body.ad-highlight dialog{padding:14px;width:540px;max-width:calc(100% - 8px);max-height:calc(100dvh - 8px)}
body.ad-highlight dialog .creative-float{max-width:calc(100% - 8px)}
body.ad-highlight dialog .float-note{margin-top:22px}
@media(max-width:759px){
 .guide-toggle:not(.float-guide-toggle){order:3;margin-left:0;min-height:34px;font-size:11px;padding:6px 10px}
 .replay{order:3;margin-left:auto}
 .mode-help{order:4;flex-basis:100%;font-size:10px;line-height:1.5}
 .guide-notice{order:5;flex-basis:100%;margin:0;font-size:9px;line-height:1.5}
 .ad-guide strong{font-size:12px}.ad-guide span{font-size:9px}
 body.ad-highlight dialog{padding:16px;width:544px;max-width:100%}
 body.ad-highlight dialog .creative-float{max-width:100%}
 .float-heading>span{font-size:11px}.float-guide-toggle{font-size:9px;padding:5px 6px}
 .float-guide-toggle::before{width:6px;height:6px}
}
@media(prefers-reduced-motion:reduce){.ad-highlight .ad-pulse{animation:none!important}}

/* Type 2 matches the full main-column width of the live upper banner. */
.top-slot{width:100%;max-width:none}

/* Match production: re-show the sidebar ad after the original column has passed. */
.sidebar-follow{position:fixed;z-index:20;width:300px;max-width:300px}
@media(max-width:1059px){.sidebar-follow{display:none!important}}

/* Finite demo-only motion: the annotation moves, never the advertisement. */
.ad-effect-frame{position:relative;width:300px;max-width:100%;margin-inline:auto}
.ad-effect-wide{width:100%}
.ad-effect-float{width:480px}
body.ad-highlight dialog .ad-effect-float{max-width:calc(100% - 8px)}
body.ad-highlight dialog .ad-effect-float .creative-float{max-width:100%}
.ad-border-light{display:none;position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);overflow:visible;pointer-events:none}
.ad-border-light rect{fill:none;x:2px;y:2px;width:calc(100% - 4px);height:calc(100% - 4px);rx:17px;stroke-width:4;stroke-linecap:round}
.ad-border-tail{stroke:#ffdf61;stroke-dasharray:18 82}
.ad-border-head{stroke:#fff;stroke-dasharray:4 96;stroke-dashoffset:-14}
.ad-highlight .ad-attention>.ad-guide{animation:ad-guide-nudge 2.4s ease-in-out 2}
.ad-highlight .ad-attention .ad-border-light{display:block;animation:ad-border-visibility 4.8s linear forwards}
.ad-highlight .ad-attention .ad-border-tail{animation:ad-border-lap 2.4s linear 2}
.ad-highlight .ad-attention .ad-border-head{animation:ad-border-head-lap 2.4s linear 2}
@keyframes ad-guide-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes ad-border-lap{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes ad-border-head-lap{from{stroke-dashoffset:-14}to{stroke-dashoffset:-114}}
@keyframes ad-border-visibility{0%,100%{opacity:0}8%,92%{opacity:1}}
@media(max-width:759px){
 body.ad-highlight dialog .ad-effect-float{max-width:100%}
 .ad-effect-wide .ad-border-light rect{rx:13px}
}
@media(prefers-reduced-motion:reduce){
 .ad-highlight .ad-attention>.ad-guide{animation:none!important;transform:none!important}
 .ad-highlight .ad-attention .ad-border-light{display:none!important}
 .ad-border-light,.ad-border-light rect{animation:none!important}
}