:root{--black:#151515;--white:#fffdf5;--yellow:#ffd52e;--red:#ed3d32;--blue:#278be8;--cream:#fff6d8;--ink:#202020;--line:#151515}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--white);font-family:"Arial Black","Microsoft YaHei UI",sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}img{max-width:100%}.panel-shell{width:min(1220px,calc(100% - 40px));margin-inline:auto}
.panel-header{position:sticky;top:0;z-index:50;border-bottom:4px solid var(--black);background:var(--yellow)}.panel-nav{min-height:70px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}.panel-brand{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:900}.panel-brand img{display:block;width:34px;height:34px;object-fit:contain}.panel-links{display:flex;justify-content:center;gap:clamp(16px,3vw,35px);font-size:12px;font-weight:900}.panel-links a:hover{color:var(--red)}.panel-nav-button{padding:9px 18px;border:3px solid var(--black);background:var(--white);box-shadow:4px 4px 0 var(--black);font-weight:900;white-space:nowrap}
.comic-hero{padding:28px 0;background-color:#f6f0d7;background-image:radial-gradient(#272727 1px,transparent 1px);background-size:9px 9px}.comic-grid{display:grid;grid-template-columns:1.2fr 1fr .65fr;grid-template-rows:360px 260px;gap:12px}.comic-panel{position:relative;overflow:hidden;border:5px solid var(--black);background:var(--white);box-shadow:7px 7px 0 var(--black)}.panel-number{position:absolute;z-index:5;top:8px;left:9px;padding:3px 7px;border:2px solid var(--black);background:var(--white);font-size:8px}.comic-kicker{margin:0 0 10px;color:#9a261f;font-size:9px;font-weight:900;letter-spacing:.1em}.title-panel{grid-row:1/3;padding:70px 38px 35px;background:var(--yellow)}.title-panel::after{content:"";position:absolute;right:-45px;bottom:-45px;width:220px;height:220px;border:4px solid var(--black);border-radius:50%;background:var(--blue)}.title-panel h1,.story-layout h2,.power-layout h2,.device-dialogue h2,.problem-layout h2,.guide-layout h2,.faq-layout h2,.callout-layout h2{position:relative;z-index:2;margin:0;font-family:Impact,"Arial Black","Microsoft YaHei UI",sans-serif;font-size:clamp(50px,6vw,82px);line-height:.92;letter-spacing:-.025em;text-transform:uppercase}.speech{position:relative;padding:14px 17px;border:3px solid var(--black);border-radius:45%;background:var(--white);font-family:"Segoe UI","Microsoft YaHei UI",sans-serif;font-weight:700}.speech::after{content:"";position:absolute;bottom:-14px;left:20%;width:23px;height:23px;border-right:3px solid var(--black);border-bottom:3px solid var(--black);background:var(--white);transform:skew(-25deg) rotate(30deg)}.speech--title{z-index:3;margin-top:55px;max-width:350px}.product-panel{grid-row:1/3;background:var(--blue)}.product-panel figure{height:auto;margin:52px 45px 0;padding:0;border:4px solid var(--black);background:#fff;overflow:visible;transform:rotate(2deg);align-self:center}.product-panel img,.device-panel img{display:block;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:0;object-fit:contain;object-position:center;clip-path:none;transform:none}.sound-word{position:absolute;top:38px;right:8px;padding:12px;background:var(--yellow);clip-path:polygon(50% 0,61% 25%,85% 5%,79% 34%,100% 39%,77% 52%,96% 73%,67% 70%,63% 100%,48% 76%,28% 96%,31% 67%,0 63%,25% 48%,5% 25%,36% 29%);font-size:17px}.product-panel>p{margin:18px;text-align:center;color:#fff}.question-panel,.answer-panel{padding:55px 18px 18px}.question-panel{background:var(--red)}.answer-panel{background:var(--cream)}.question-panel p,.answer-panel p{font-family:"Segoe UI","Microsoft YaHei UI",sans-serif;font-weight:700}.action-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--yellow);text-align:center}.action-panel>span{font-size:11px}.burst-button{display:flex;align-items:center;justify-content:center;width:205px;height:135px;margin:9px;clip-path:polygon(50% 0,60% 20%,80% 5%,78% 28%,100% 24%,84% 44%,100% 55%,78% 59%,91% 82%,67% 75%,61% 100%,49% 79%,31% 98%,29% 75%,5% 86%,19% 61%,0 51%,21% 41%,4% 19%,31% 27%,37% 4%);color:#fff;background:var(--red);font-size:24px;font-weight:900;text-shadow:2px 2px 0 var(--black);transition:transform .2s ease}.burst-button:hover{transform:scale(1.06) rotate(-2deg)}.action-panel small{font-family:"Segoe UI",sans-serif;font-weight:700}
.story-section{padding:clamp(95px,12vw,150px) 0;background:var(--white)}.story-layout>header,.power-layout>header{display:grid;grid-template-columns:.35fr 1.65fr;gap:35px;margin-bottom:55px}.story-layout h2,.power-layout h2,.device-dialogue h2,.problem-layout h2,.guide-layout h2,.faq-layout h2{font-size:clamp(38px,5vw,64px)}.story-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.story-strip article{min-height:230px;padding:22px;border:4px solid var(--black);box-shadow:5px 5px 0 var(--black)}.story-strip article:nth-child(1){background:var(--yellow)}.story-strip article:nth-child(2){background:var(--blue);color:#fff}.story-strip article:nth-child(3){background:var(--red);color:#fff}.story-strip article:nth-child(4){background:var(--cream)}.story-strip span{font-size:28px}.story-strip h3{margin:55px 0 8px}.story-strip p{font-family:"Segoe UI",sans-serif;font-weight:700}
.power-section{padding:clamp(95px,12vw,150px) 0;background:var(--yellow)}.power-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px}.power-panels article{display:grid;grid-template-columns:140px 1fr;gap:25px;align-items:center;padding:23px;border:4px solid var(--black);background:#fff;box-shadow:5px 5px 0 var(--black)}.power-panels b{font-size:17px}
.device-comic{padding:clamp(95px,12vw,150px) 0;background:var(--blue)}.device-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:25px;align-items:center}.device-panel{position:relative;align-self:center;height:auto;margin:0;padding:48px 18px 18px;border:5px solid var(--black);background:#fff;box-shadow:8px 8px 0 var(--black);overflow:visible;transform:rotate(-1deg)}.device-panel figcaption{text-align:center}.device-dialogue{color:#fff}.device-dialogue .comic-kicker{color:var(--yellow)}.device-dialogue .speech{margin:25px 0;color:var(--ink)}.device-dialogue nav{display:flex;flex-wrap:wrap;gap:7px}.device-dialogue nav a{padding:8px 11px;border:3px solid var(--black);color:var(--ink);background:var(--yellow);box-shadow:3px 3px 0 var(--black);font-size:9px}
.problem-section{padding:clamp(95px,12vw,150px) 0;background:var(--cream)}.problem-layout{display:grid;grid-template-columns:.6fr 1.4fr;gap:50px}.problem-pages{display:grid;grid-template-columns:1fr 1fr;gap:10px}.problem-pages article{padding:20px;border:4px solid var(--black);background:#fff;box-shadow:4px 4px 0 var(--black)}.problem-pages span{color:var(--red)}.problem-pages p{font-family:"Segoe UI",sans-serif;font-weight:700}.problem-pages b{font-size:18px}.problem-layout>.comic-text-link{grid-column:2;color:#a2251e}
.comic-guides{padding:clamp(95px,12vw,150px) 0;background:#fff}.guide-layout{display:grid;grid-template-columns:.6fr 1.4fr;gap:50px}.guide-layout>div{border-top:4px solid var(--black)}.guide-layout article{display:grid;grid-template-columns:65px 1fr 1fr 55px;gap:20px;padding:19px 0;border-bottom:3px solid var(--black)}.guide-layout span,.guide-layout a{color:#a2251e}.guide-layout h3,.guide-layout p{margin:0}.guide-layout p{font-family:"Segoe UI",sans-serif;color:#596166}.guide-layout a{text-align:right}
.comic-faq{padding:clamp(95px,12vw,150px) 0;background:var(--yellow)}.faq-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:50px}.faq-layout>div{border-top:4px solid var(--black)}.faq-layout details{border-bottom:3px solid var(--black)}.faq-layout summary{padding:20px 0;cursor:pointer;list-style:none}.faq-layout summary::-webkit-details-marker{display:none}.faq-layout details p{margin:0 0 20px;font-family:"Segoe UI",sans-serif;font-weight:700}
.comic-callout{padding:70px 0;background:var(--red)}.callout-layout{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;color:#fff}.callout-layout .comic-kicker{color:var(--yellow)}.callout-layout h2{font-size:clamp(38px,5vw,60px)}.burst-button--small{width:180px;height:120px;color:#111;background:var(--yellow);font-size:19px;text-shadow:none}
.comic-footer{padding:52px 0 22px;background:var(--black);color:#fff}.footer-layout{display:grid;grid-template-columns:1.5fr .6fr .6fr;gap:46px}.footer-layout h3{margin:0 0 10px;color:var(--yellow);font-size:12px}.footer-layout>div>a:not(.panel-brand){display:block;margin:7px 0;color:#bbb;font-size:12px}.footer-layout>div:first-child p{color:#bbb;font:12px "Segoe UI",sans-serif}.copyright{grid-column:1/4;margin:20px 0 0;padding-top:18px;border-top:1px solid #555;color:#888;font-size:10px}
@media(max-width:900px){.comic-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.title-panel,.product-panel{grid-row:auto}.action-panel{grid-column:1/3}.problem-layout,.guide-layout,.faq-layout{grid-template-columns:1fr}.problem-layout>.comic-text-link{grid-column:auto}.guide-layout article{grid-template-columns:65px 1fr}.guide-layout p{grid-column:2}.guide-layout a{grid-column:2;text-align:left}}
@media(max-width:680px){.panel-shell{width:min(100% - 20px,1220px)}.panel-nav{grid-template-columns:auto auto}.panel-nav>.panel-nav-button{display:none}.panel-links{grid-column:1/3;grid-row:2;justify-content:flex-start;overflow-x:auto;padding:9px 0}.comic-grid{grid-template-columns:1fr}.title-panel,.product-panel,.action-panel{grid-column:auto}.title-panel{min-height:560px}.product-panel{min-height:560px}.story-layout>header,.power-layout>header{grid-template-columns:1fr}.story-strip,.power-panels{grid-template-columns:1fr}.power-panels article{grid-template-columns:1fr}.device-layout{grid-template-columns:1fr}.problem-pages{grid-template-columns:1fr}.guide-layout article{grid-template-columns:1fr}.guide-layout p,.guide-layout a{grid-column:auto}.callout-layout{grid-template-columns:1fr}.footer-layout{grid-template-columns:1fr 1fr}.footer-layout>div:first-child{grid-column:1/3}.copyright{grid-column:1/3}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.burst-button{transition:none}.burst-button:hover{transform:none}}
.product-panel figure,.device-panel{align-self:center;height:auto;padding-top:0;margin-top:52px;margin-bottom:0;overflow:visible}.product-panel img,.device-panel img{display:block;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:0;object-fit:contain;object-position:center;clip-path:none}