:root{--bg:#f4f1ea;--card:#fff;--ink:#1e1e24;--tx:#34343c;--mu:#75757f;--ln:#e5e0d4;
  --coral:#ff6b5b;--amber:#ffb800;--teal:#00a6a6;--violet:#7b5cff;--lime:#9bd400;--sky:#2fa8ff;
  --d:"M PLUS Rounded 1c","Arial Rounded MT Bold",Arial,sans-serif;--b:"M PLUS Rounded 1c",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:500 17px/1.75 var(--b);
  background-image:linear-gradient(rgba(30,30,36,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(30,30,36,.035) 1px,transparent 1px);background-size:28px 28px}
img{max-width:100%;height:auto;display:block}
a{color:#5a3ee0}
.c-coral{--c:var(--coral)}.c-amber{--c:var(--amber)}.c-teal{--c:var(--teal)}.c-violet{--c:var(--violet)}.c-lime{--c:var(--lime)}.c-sky{--c:var(--sky)}
/* top */
.mw-top{position:sticky;top:0;z-index:50;background:var(--ink)}
.mw-top-in{max-width:1180px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:22px}
.mw-logo img{width:200px}
.mw-nav{margin-left:auto;display:flex;gap:6px}
.mw-nav a{font:800 .95rem var(--d);color:#fff;text-decoration:none;padding:7px 14px;border-radius:10px}
.mw-nav a:nth-child(6n+1){--c:var(--coral)}.mw-nav a:nth-child(6n+2){--c:var(--amber)}.mw-nav a:nth-child(6n+3){--c:var(--teal)}
.mw-nav a:hover{box-shadow:inset 0 -3px 0 var(--c)}
.mw-nav a.on{background:var(--c);color:var(--ink)}
.mw-age{font:800 .9rem var(--d);background:var(--amber);color:var(--ink);padding:5px 10px;border-radius:10px}
.mw-btn{display:none;width:46px;height:46px;border:0;border-radius:12px;background:#2c2c35;cursor:pointer;padding:10px 9px;align-items:flex-end;gap:4px}
.mw-btn i{flex:1;border-radius:3px}
.mw-btn i:nth-child(1){height:12px;background:var(--coral)}.mw-btn i:nth-child(2){height:24px;background:var(--amber)}.mw-btn i:nth-child(3){height:17px;background:var(--teal)}
/* drop menu */
.mw-drop{position:fixed;inset:0;z-index:90;background:var(--bg);visibility:hidden;transition:visibility 0s .6s;overflow-y:auto;padding:0 0 20px}
.mw-drop.open{visibility:visible;transition:none}
.mw-drop-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--ink)}
.mw-drop-head p{margin:0;font:800 1.3rem var(--d);color:#fff}
.mw-drop-x{width:42px;height:42px;border-radius:12px;border:0;background:var(--coral);color:var(--ink);font-size:1.1rem;cursor:pointer}
.mw-drop nav{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.mw-drop nav a{display:block;padding:16px 18px;border-radius:16px;background:var(--c);color:var(--ink);text-decoration:none;
  transform:translateY(-120vh);transition:transform .55s cubic-bezier(.3,1.35,.5,1);transition-delay:calc(var(--i) * 70ms)}
.mw-drop.open nav a{transform:none}
.mw-drop nav b{display:block;font:800 1.35rem var(--d)}
.mw-drop nav small{display:block;font-size:.84rem;line-height:1.35;opacity:.8}
.mw-drop nav a.on{box-shadow:0 0 0 3px var(--ink),6px 6px 0 var(--ink)}
/* hero */
.mw-article{max-width:1180px;margin:0 auto;padding:36px 24px 0}
.mw-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center}
.mw-crumbs{font-size:.86rem;color:var(--mu)}
.mw-crumbs a{color:var(--ink)}
.mw-sec{display:inline-block;margin:14px 0 10px;font:800 .82rem var(--d);text-transform:uppercase;letter-spacing:.12em;padding:4px 12px;border-radius:8px;background:var(--ink);color:var(--amber)}
.mw-hero h1{font:800 clamp(2rem,4.2vw,3.2rem)/1.12 var(--d);color:var(--ink);margin:0 0 20px}
.mw-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;font-size:.92rem;color:var(--mu)}
.mw-meta b{color:var(--ink)}
.mw-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;height:300px;align-items:end;padding:16px;border-radius:22px;background:var(--ink)}
.mw-reel{display:flex;flex-direction:column-reverse;gap:6px;height:100%;justify-content:flex-start}
.mw-reel i{display:block;border-radius:8px;background:var(--c);flex:1;max-height:0;opacity:0;transition:max-height .5s cubic-bezier(.3,1.3,.5,1),opacity .3s}
.mw-reel i.on{max-height:60px;opacity:1}
.mw-hero-img{margin:30px 0 0}
.mw-hero-img img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:22px;border:4px solid var(--ink)}
/* body */
.mw-body{max-width:780px;margin:44px auto 0;background:var(--card);border-radius:24px;padding:36px 44px 30px;box-shadow:0 2px 0 var(--ln),0 20px 50px rgba(30,30,36,.06)}
.mw-lead{font-size:1.18rem;line-height:1.7;color:var(--ink);margin:0 0 10px;font-weight:700}
.mw-body h2{display:flex;align-items:center;gap:16px;margin:50px 0 18px;font:800 clamp(1.35rem,2.6vw,1.75rem)/1.25 var(--d);color:var(--ink)}
.mw-stack{flex:none;display:grid;grid-template-columns:30px 18px;grid-template-rows:18px 18px;gap:4px}
.mw-stack i{border-radius:6px;background:var(--c)}
.mw-stack i:first-child{grid-row:1/3;display:flex;align-items:center;justify-content:center;font:800 1.05rem var(--d);font-style:normal;color:var(--ink)}
.mw-body h3{font:800 1.18rem var(--d);color:var(--ink);margin:28px 0 8px;padding-left:14px;border-left:5px solid var(--teal)}
.mw-body p{margin:0 0 1em}
.mw-body strong{color:var(--ink)}
.mw-body ul,.mw-body ol{margin:0 0 1.1em;padding-left:1.4em}
.mw-body li{margin:.3em 0}
.mw-body ul li::marker{content:"■ ";color:var(--coral)}
.mw-body ol li::marker{font:800 1em var(--d);color:var(--violet)}
/* table */
.tbl-wrap{overflow-x:auto;margin:6px 0 24px;border-radius:14px;border:2px solid var(--ink)}
.tbl-wrap table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.tbl-wrap th{text-align:left;padding:10px 14px;background:var(--ink);color:#fff;font:800 .88rem var(--d)}
.tbl-wrap th:nth-child(6n+1){box-shadow:inset 0 -4px 0 var(--coral)}.tbl-wrap th:nth-child(6n+2){box-shadow:inset 0 -4px 0 var(--amber)}.tbl-wrap th:nth-child(6n+3){box-shadow:inset 0 -4px 0 var(--teal)}.tbl-wrap th:nth-child(6n+4){box-shadow:inset 0 -4px 0 var(--violet)}.tbl-wrap th:nth-child(6n+5){box-shadow:inset 0 -4px 0 var(--lime)}
.tbl-wrap td{padding:10px 14px;border-bottom:1px solid var(--ln)}
.tbl-wrap tr:last-child td{border-bottom:0}
.tbl-wrap td:first-child{font-weight:700;color:var(--ink)}
/* fig */
.mw-fig{margin:10px 0 26px}
.mw-fig img{width:100%;max-height:420px;object-fit:cover;border-radius:16px}
.mw-fig figcaption{margin-top:8px;font-size:.88rem;color:var(--mu);padding-left:12px;border-left:4px solid var(--amber)}
/* calc */
.mw-calc{margin:10px 0 26px;padding:22px;border-radius:20px;background:var(--ink);color:#fff}
.mw-calc-title{margin:0 0 14px;font:800 1.3rem var(--d)}
.mw-calc-fields,.mw-calc-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mw-calc-f{display:flex;flex-direction:column;gap:6px;font-size:.84rem;color:#c3c3cc}
.mw-calc input{width:100%;background:#2c2c35;border:2px solid #3b3b46;border-radius:12px;color:#fff;font:800 1.2rem var(--d);padding:9px 12px}
.mw-calc input:focus{outline:none;border-color:var(--amber)}
.mw-calc-out{margin-top:12px}
.mw-calc-out div{border-radius:12px;padding:10px 12px;color:var(--ink)}
.mw-calc-out div:nth-child(1){background:var(--teal)}.mw-calc-out div:nth-child(2){background:var(--amber)}.mw-calc-out div:nth-child(3){background:var(--lime)}
.mw-calc-out span{display:block;font-size:.8rem;font-weight:700}
.mw-calc-out b{font:800 1.3rem var(--d)}
.mw-calc-out b.is-neg{color:#b3001b}
.mw-calc-note{margin:12px 0 0;font-size:.82rem;color:#c3c3cc}
/* faq tiles */
.mw-ft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-auto-flow:dense}
.mw-ft{border-radius:16px;background:var(--c);transition:transform .2s}
.mw-ft.open{grid-column:1/-1}
.mw-ft button{width:100%;min-height:96px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:left;background:none;border:0;padding:16px 18px;cursor:pointer;font:800 1.02rem/1.35 var(--d);color:var(--ink)}
.mw-ft button i{flex:none;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;font:800 1.2rem/30px var(--d);font-style:normal;text-align:center;transition:transform .25s}
.mw-ft.open button i{transform:rotate(45deg)}
.mw-ft-a{display:none;margin:0 10px 10px;padding:12px 14px;border-radius:12px;background:#fff;color:var(--tx)}
.mw-ft-a p{margin:0}
.mw-ft.open .mw-ft-a{display:block}
.mw-tail{margin-top:28px;font-size:.85rem;color:var(--mu)}
/* more */
.mw-more{max-width:1180px;margin:60px auto 0;padding:0 24px 60px}
.mw-more-h{font:800 1.8rem var(--d);color:var(--ink);margin:0 0 18px}
.mw-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mw-big{position:relative;display:flex;flex-direction:column;padding:12px 12px 18px;border-radius:24px;background:var(--c);text-decoration:none;color:var(--ink);transition:transform .2s}
.mw-big:nth-child(2){margin-top:40px}
.mw-big:hover{transform:translateY(-5px) rotate(-.6deg)}
.mw-big-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
.mw-big-s{margin:14px 8px 4px;font:800 .78rem var(--d);text-transform:uppercase;letter-spacing:.1em}
.mw-big b{margin:0 8px;font:800 1.35rem/1.25 var(--d)}
.mw-big em{margin:10px 8px 0;font-style:normal;font-weight:700;font-size:.9rem}
/* foot */
.mw-foot{background:var(--ink);color:#b9b9c3}
.mw-mosaic{display:grid;grid-template-columns:repeat(24,1fr);height:22px}
.mw-mosaic i{background:var(--c)}
.mw-mosaic i:nth-child(odd){transform:scaleY(.6);transform-origin:bottom}
.mw-foot-in{max-width:1180px;margin:0 auto;padding:34px 24px 30px;display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:34px}
.mw-foot-in p{font-size:.88rem;line-height:1.6}
.mw-foot nav{display:flex;flex-direction:column;gap:6px}
.mw-foot nav a{font:800 1rem var(--d);color:#fff;text-decoration:none}
.mw-foot nav a:hover{color:var(--amber)}
.mw-badges{display:flex;flex-wrap:wrap;gap:8px}
.mw-badges img{height:36px;width:auto}
.mw-copy{margin-top:14px}
/* up */
.mw-up{position:fixed;right:18px;bottom:18px;z-index:40;width:52px;height:52px;border:0;border-radius:14px;background:var(--violet);color:#fff;font:800 1.3rem var(--d);cursor:pointer;box-shadow:0 6px 0 var(--ink);opacity:0;pointer-events:none;transition:.25s}
.mw-up.show{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.mw-reel i{transition:none}}
/* responsive */
@media (max-width:1000px){
  .mw-nav{display:none}
  .mw-age{margin-left:auto}
  .mw-btn{display:flex}
  .mw-hero{grid-template-columns:1fr;gap:24px}
  .mw-grid{height:200px}
}
@media (max-width:680px){
  body{font-size:16px}
  .mw-top-in{padding:8px 16px;gap:10px}
  .mw-logo img{width:170px}
  .mw-article{padding:20px 16px 0}
  .mw-grid{height:150px;gap:5px;padding:10px;border-radius:16px}
  .mw-reel{gap:4px}
  .mw-reel i{border-radius:5px}
  .mw-hero-img img{aspect-ratio:16/10;border-width:3px}
  .mw-body{margin:28px -6px 0;padding:24px 18px 20px;border-radius:18px}
  .mw-body h2{gap:12px}
  .mw-stack{grid-template-columns:26px 14px;grid-template-rows:15px 15px}
  .mw-calc-fields,.mw-calc-out{grid-template-columns:1fr}
  .mw-ft-grid{grid-template-columns:1fr}
  .mw-more{padding:0 16px 46px}
  .mw-more-grid{grid-template-columns:1fr}
  .mw-big:nth-child(2){margin-top:0}
  .mw-foot-in{grid-template-columns:1fr;padding:28px 16px 24px}
}