.resource-page{background:#f8fbff;color:#142b4c;overflow-x:hidden;overflow-anchor:none}
.resource-page *{box-sizing:border-box}
.resource-page button{font:inherit}
.rn-main{min-height:70vh;padding:0 0 36px;background:linear-gradient(180deg,#fff 0,#f8fbff 100%)}
.rn-wrap{width:min(100% - 28px,1050px);margin-inline:auto}
.rn-hero{position:relative;overflow:hidden;border-bottom:1px solid #dcecf8;background:radial-gradient(circle at 91% 5%,#ceeaff 0,#e8f6ff 30%,transparent 52%),linear-gradient(115deg,#f1f9ff 0%,#fbfdff 68%,#eaf7ff 100%)}
.rn-hero-inner{position:relative;padding:24px 0 28px}
.rn-breadcrumb{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin:0 0 18px;color:#5e7793;font-size:14px;font-weight:650}
.rn-breadcrumb a{color:#385674;text-decoration:none}
.rn-breadcrumb a:hover{color:#147dde}
.rn-hero h1{position:relative;z-index:1;margin:0 0 10px;color:#102b50;font-size:clamp(34px,4.8vw,54px);font-weight:880;line-height:1.12;letter-spacing:-.02em}
.rn-hero h1 span{color:#1687e8}
.rn-hero-description{position:relative;z-index:1;max-width:720px;margin:0;color:#526b87;font-size:clamp(15px,1.8vw,19px);font-weight:550;line-height:1.6}
.rn-hero-mark{position:absolute;right:-47px;top:-7px;width:210px;height:210px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#b5dfff,#e2f4ff);opacity:.74;pointer-events:none}
.rn-hero-mark svg{width:69%;transform:rotate(-8deg)}
.rn-content{padding-top:30px}
.rn-section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 16px}
.rn-section-heading p{margin:0 0 5px;color:#1683e7;font-size:13px;font-weight:780;letter-spacing:.05em}
.rn-section-heading h2{display:flex;align-items:center;gap:11px;margin:0;color:#122d52;font-size:29px;line-height:1.2;font-weight:860;letter-spacing:-.01em}
.rn-section-heading h2:before{content:"";width:6px;height:30px;border-radius:99px;background:linear-gradient(180deg,#20a6f5,#126fd8)}
.rn-result-count{flex:none;padding:7px 12px;border:1px solid #d7e7f4;border-radius:999px;background:#fff;color:#70839a;font-size:13px;font-weight:700}
.rn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rn-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:245px;overflow:hidden;padding:22px;border:1px solid #d7e5f2;border-radius:22px;background:linear-gradient(145deg,#fff 30%,#f5faff 100%);box-shadow:0 12px 32px rgba(24,69,116,.09)}
.rn-card:before{content:"";position:absolute;right:-55px;top:-70px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,#dff2ff 0,#eef8ff 54%,transparent 55%);pointer-events:none}
.rn-card-2{background:linear-gradient(145deg,#fff 30%,#f9f7ff 100%)}
.rn-card-2:before{background:radial-gradient(circle,#eee8ff 0,#f7f3ff 54%,transparent 55%)}
.rn-card-3{background:linear-gradient(145deg,#fff 30%,#f3fbf6 100%)}
.rn-card-3:before{background:radial-gradient(circle,#dff7e8 0,#eefaf3 54%,transparent 55%)}
.rn-card-4{background:linear-gradient(145deg,#fff 30%,#fff8f1 100%)}
.rn-card-4:before{background:radial-gradient(circle,#ffead5 0,#fff6ed 54%,transparent 55%)}
.rn-card-main{position:relative;z-index:1;display:flex;align-items:flex-start;gap:16px;min-width:0}
.rn-avatar{position:relative;flex:none;display:grid;place-items:center;width:76px;height:76px;overflow:hidden;border:1px solid #dce8f2;border-radius:22px;background:linear-gradient(145deg,#1689eb,#0873cf);color:#fff;font-size:34px;font-weight:850;box-shadow:0 8px 20px rgba(18,112,196,.2)}
.rn-card-2 .rn-avatar{background:linear-gradient(145deg,#7b62e8,#4557d6);box-shadow:0 8px 20px rgba(87,75,201,.2)}
.rn-card-3 .rn-avatar{background:linear-gradient(145deg,#26b981,#0b8b63);box-shadow:0 8px 20px rgba(11,139,99,.2)}
.rn-card-4 .rn-avatar{background:linear-gradient(145deg,#ff9b43,#e76c1b);box-shadow:0 8px 20px rgba(231,108,27,.2)}
.rn-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.rn-avatar:has(img)>span{display:none}
.rn-card-copy{flex:1;min-width:0}
.rn-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rn-kicker{display:block;margin-bottom:4px;color:#70839b;font-size:11px;font-weight:750;letter-spacing:.05em}
.rn-card h3{margin:0;color:#122d52;font-size:23px;font-weight:860;line-height:1.25;letter-spacing:-.015em}
.rn-recommend{flex:none;padding:5px 9px;border-radius:999px;background:#e2f8ee;color:#099464;font-size:11px;font-weight:800}
.rn-card p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;margin:13px 0 0;color:#5a6e87;font-size:14px;line-height:1.62}
.rn-card-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:16px;border-top:1px solid #deebf5}
.rn-handle{min-width:0;overflow:hidden;color:#57718e;font-size:14px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.rn-open-link{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 19px;border-radius:999px;background:#1683e7;color:#fff;text-decoration:none;font-size:14px;font-weight:780;box-shadow:0 5px 13px rgba(22,131,231,.2);transition:transform .18s,box-shadow .18s,background .18s}
.rn-open-link:hover{transform:translateY(-1px);background:#0c73d1;color:#fff;box-shadow:0 7px 17px rgba(22,131,231,.26)}
.rn-card-2 .rn-open-link{background:#6155d8;box-shadow:0 5px 13px rgba(97,85,216,.2)}
.rn-card-2 .rn-open-link:hover{background:#5044c8;box-shadow:0 7px 17px rgba(97,85,216,.26)}
.rn-card-3 .rn-open-link{background:#0c9a6b;box-shadow:0 5px 13px rgba(12,154,107,.2)}
.rn-card-3 .rn-open-link:hover{background:#087f58;box-shadow:0 7px 17px rgba(12,154,107,.26)}
.rn-card-4 .rn-open-link{background:#e87828;box-shadow:0 5px 13px rgba(232,120,40,.2)}
.rn-card-4 .rn-open-link:hover{background:#cf641c;box-shadow:0 7px 17px rgba(232,120,40,.26)}
.rn-open-link span{font-size:17px;line-height:1}
.rn-open-link:focus-visible{outline:3px solid #68b8ff;outline-offset:3px}
.rn-state{grid-column:1/-1;padding:42px 20px;border:1px solid #dbe7f2;border-radius:18px;background:#fff;color:#5b6d84;text-align:center}
.rn-state strong{display:block;color:#183452;font-size:18px}
.rn-state p{margin:8px 0 15px}
.rn-state button{padding:10px 18px;border:1px solid #cde4fa;border-radius:10px;background:#f0f8ff;color:#147dde;font-weight:700;cursor:pointer}
.rn-safety-note{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:15px 17px;border:1px solid #dbe9f5;border-radius:16px;background:#f3f9fe}
.rn-safety-note>span{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#1683e7;color:#fff;font-family:serif;font-weight:700}
.rn-safety-note p{margin:1px 0;color:#62758c;font-size:13px;line-height:1.55}
.rn-safety-note strong{margin-right:8px;color:#294763}
@media(max-width:760px){
  .rn-wrap{width:min(100% - 24px,680px)}
  .rn-hero-inner{padding:15px 0 20px}
  .rn-breadcrumb{margin-bottom:11px;font-size:13px}
  .rn-hero h1{font-size:clamp(30px,8vw,38px)}
  .rn-hero-description{max-width:82%;font-size:14px;line-height:1.5}
  .rn-hero-mark{right:-58px;top:-4px;width:158px;height:158px}
  .rn-content{padding-top:22px}
  .rn-section-heading{align-items:center;margin-bottom:12px}
  .rn-section-heading p{font-size:11px}
  .rn-section-heading h2{font-size:22px}
  .rn-section-heading h2:before{height:25px}
  .rn-result-count{padding:5px 9px;font-size:11px}
  .rn-grid{grid-template-columns:1fr;gap:12px}
  .rn-card{min-height:0;padding:17px;border-radius:18px}
  .rn-card-main{gap:13px}
  .rn-avatar{width:64px;height:64px;border-radius:18px;font-size:28px}
  .rn-card h3{font-size:19px}
  .rn-kicker{font-size:10px}
  .rn-recommend{padding:4px 7px;font-size:10px}
  .rn-card p{margin-top:10px;font-size:13px;line-height:1.55}
  .rn-card-footer{margin-top:16px;padding-top:13px}
  .rn-handle{font-size:13px}
  .rn-open-link{min-height:39px;padding:0 16px;font-size:13px}
  .rn-safety-note{padding:13px}
}
@media(max-width:390px){
  .rn-result-count{display:none}
  .rn-avatar{width:58px;height:58px;border-radius:16px}
  .rn-card h3{font-size:18px}
  .rn-card p{-webkit-line-clamp:4}
}