@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Montserrat:wght@400;500;600;700;800&display=swap');

#opo-mnemo *{margin:0;padding:0;box-sizing:border-box}
#opo-mnemo{
  --navy:#1D2757; --navy2:#141d40;
  --blue:#14B8A6; --blue2:#5fd6c7; --blue-soft:#e7faf6;
  --ink:#2c3457; --muted:#6b7396; --line:#eceff7; --card:#f6f8fc;
  --acr:#8B5CF6; --aso:#14B8A6; --num:#22C55E; --for:#F97316;
  --serif:'Fraunces',Georgia,serif; --sans:'Montserrat',-apple-system,sans-serif;
  font-family:var(--sans); color:var(--ink); line-height:1.7;
  background:#fff; max-width:820px; margin:0 auto; position:relative;
  -webkit-font-smoothing:antialiased;
}
#opo-mnemo .wrap{padding:0 30px}

#opo-mnemo .m-progress{position:sticky;top:0;height:3px;width:100%;z-index:40;background:transparent}
#opo-mnemo .m-progress i{display:block;height:100%;width:0;background:var(--blue);transition:width .35s cubic-bezier(.4,0,.2,1)}

#opo-mnemo .hero{text-align:center;padding:52px 30px 6px}
#opo-mnemo .cat{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--navy)}
#opo-mnemo .hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,7vw,50px);line-height:1.12;letter-spacing:-.015em;color:var(--navy);margin:18px 0 0}
#opo-mnemo .hero h1 span{color:var(--blue)}
#opo-mnemo .hero .sub{max-width:540px;margin:18px auto 0;color:var(--muted);font-size:16.5px;line-height:1.66}

#opo-mnemo .feat-img{margin:28px 30px 0;height:170px;border-radius:24px;
  background:radial-gradient(130% 130% at 80% 10%,#5fd6c7,#14B8A6 60%,#0d7a6f);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
#opo-mnemo .feat-img::after{content:"";position:absolute;right:-40px;bottom:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.10)}
#opo-mnemo .feat-img::before{content:"";position:absolute;left:-30px;top:-50px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.07)}
#opo-mnemo .feat-img svg{width:60px;height:60px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}

#opo-mnemo .howto{margin:26px 30px 0;background:var(--blue-soft);border:1px solid #b3e7df;border-radius:18px;padding:18px 22px;display:flex;gap:14px;align-items:flex-start}
#opo-mnemo .howto svg{flex:0 0 auto;width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
#opo-mnemo .howto p{font-size:14.5px;color:var(--ink);line-height:1.6}
#opo-mnemo .howto b{color:var(--navy);font-weight:700}

#opo-mnemo .legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px 30px 0}
#opo-mnemo .lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
#opo-mnemo .lg i{width:9px;height:9px;border-radius:50%}

#opo-mnemo .counter{text-align:center;margin:30px 30px 4px;font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase}
#opo-mnemo .counter b{color:var(--blue);font-size:15px}

#opo-mnemo .cards{padding:14px 30px 0;display:flex;flex-direction:column;gap:16px}
#opo-mnemo .mc{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;transition:box-shadow .25s,border-color .25s}
#opo-mnemo .mc.on{border-color:#bfeae3}
#opo-mnemo .mc-head{padding:20px 22px;cursor:pointer;position:relative}
#opo-mnemo .mc-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#opo-mnemo .badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;color:#fff}
#opo-mnemo .badge.acr{background:var(--acr)} #opo-mnemo .badge.aso{background:var(--aso)}
#opo-mnemo .badge.num{background:var(--num)} #opo-mnemo .badge.for{background:var(--for)}
#opo-mnemo .art{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--navy);background:var(--blue-soft);border:1px solid #b3e7df;border-radius:999px;padding:4px 10px}
#opo-mnemo .mc-q{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.3;color:var(--navy);letter-spacing:-.01em}
#opo-mnemo .mc-data{margin-top:9px;font-size:14.5px;color:var(--ink);line-height:1.62}
#opo-mnemo .mc-data .k{background:#e7faf6;border-radius:6px;padding:1px 7px;font-weight:700;color:var(--navy);white-space:nowrap}
#opo-mnemo .mc-cta{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);background:none;border:0;cursor:pointer;font-family:var(--sans)}
#opo-mnemo .mc-cta svg{width:16px;height:16px;stroke:var(--blue);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
#opo-mnemo .mc.on .mc-cta svg{transform:rotate(180deg)}

#opo-mnemo .mc-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
#opo-mnemo .mc-inner{padding:2px 22px 24px}
#opo-mnemo .rule{background:linear-gradient(180deg,#f4fdfb,#eafaf7);border:1px solid #cdeee8;border-radius:16px;padding:18px 20px;position:relative}
#opo-mnemo .rule .lbl{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:7px;margin-bottom:10px}
#opo-mnemo .rule .lbl svg{width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#opo-mnemo .rule .phrase{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.4;color:var(--navy)}
#opo-mnemo .rule .phrase em{font-style:italic;color:var(--blue)}

#opo-mnemo .cmp{margin-top:15px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
#opo-mnemo .cmp .col{background:#fff;border:1px solid #cdeee8;border-radius:12px;padding:13px 14px}
#opo-mnemo .cmp .col h5{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
#opo-mnemo .cmp .col p{font-size:13.5px;color:var(--ink);line-height:1.5}
#opo-mnemo .cmp .col p b{color:var(--navy);font-weight:700}

#opo-mnemo .decode{margin-top:16px;display:flex;flex-direction:column;gap:8px}
#opo-mnemo .drow{display:flex;align-items:flex-start;gap:12px;font-size:14px}
#opo-mnemo .drow .ini{flex:0 0 auto;min-width:30px;height:28px;padding:0 7px;border-radius:8px;background:var(--aso);color:#fff;font-family:var(--serif);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:1px}
#opo-mnemo .drow .val{color:var(--ink);line-height:1.45;padding-top:3px}
#opo-mnemo .drow .val b{color:var(--navy);font-weight:700}

#opo-mnemo .chk{margin-top:15px;display:grid;grid-template-columns:1fr;gap:9px}
#opo-mnemo .chk .ci{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--ink);line-height:1.45}
#opo-mnemo .chk .ci .n{flex:0 0 auto;font-family:var(--serif);font-weight:700;color:#fff;background:var(--aso);border-radius:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px}
#opo-mnemo .chk .ci b{color:var(--navy);font-weight:700}

#opo-mnemo .why{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.55;display:flex;gap:9px}
#opo-mnemo .why svg{flex:0 0 auto;width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}

#opo-mnemo .end{margin:34px 30px 0;padding:30px 26px;border-radius:22px;text-align:center;background:radial-gradient(120% 120% at 50% 0%,#233066,#1D2757 70%);color:#fff}
#opo-mnemo .end h3{font-family:var(--serif);font-weight:600;font-size:24px;margin-bottom:8px}
#opo-mnemo .end p{color:#b9c2e6;font-size:14.5px;max-width:440px;margin:0 auto;line-height:1.6}
#opo-mnemo .end a{display:inline-flex;align-items:center;gap:8px;margin-top:20px;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;padding:13px 26px;border-radius:12px;transition:background .2s}
#opo-mnemo .end a:hover{background:#0d7a6f}
#opo-mnemo .end a svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

#opo-mnemo .foot{text-align:center;padding:26px 30px 40px;color:#aab2cf;font-size:12.5px;letter-spacing:.02em}

@media(max-width:560px){
  #opo-mnemo .wrap,#opo-mnemo .cards{padding-left:18px;padding-right:18px}
  #opo-mnemo .feat-img,#opo-mnemo .howto,#opo-mnemo .legend,#opo-mnemo .counter,#opo-mnemo .end{margin-left:18px;margin-right:18px}
  #opo-mnemo .hero{padding-left:20px;padding-right:20px}
  #opo-mnemo .mc-q{font-size:18px}
  #opo-mnemo .art{margin-left:0}
  #opo-mnemo .mc-top{flex-wrap:wrap}
  #opo-mnemo .cmp{grid-template-columns:1fr}
}