.learning-hero { padding:20px 0 26px; background:radial-gradient(ellipse at 85% 85%,#b8e3ff8c,transparent 60%),linear-gradient(110deg,#f4faff,#e8f5ff); border-bottom:1px solid #deedff; color:#0a1946; }
.learning-hero nav { display:flex; gap:10px; color:#51668c; font-size:.77rem; margin-bottom:20px; }.learning-hero nav a { color:#285097; }
.learning-hero-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr); gap:45px; align-items:center; }.learning-eyebrow { display:inline-block; padding:6px 12px; border-radius:20px; background:#deefff; border:1px solid #cee7ff; font-size:.7rem; font-weight:700; color:#0065ed; }
.lipicode-bold .learning-hero h1 { font-size:clamp(2.5rem,4.5vw,3.7rem); line-height:1.12; letter-spacing:-.045em; margin:13px 0 10px; font-weight:800; color:#091541; }.learning-hero h1 span { color:#0067ff; }.learning-hero p { max-width:650px; font-size:1rem; line-height:1.65; color:#49638f; margin:0; }
.learning-search { display:flex; align-items:center; gap:12px; border:1px solid #d9eaff; border-radius:35px; padding:6px 7px 6px 18px; background:white; margin-top:21px; box-shadow:0 5px 17px #0a73e80b; }.learning-search svg { width:22px; height:22px; flex-shrink:0; fill:none; stroke:#0a4ca7; stroke-width:1.8; }.learning-search input { min-width:0; width:100%; border:0; outline:none; color:#243b64; background:transparent; padding:8px 0; font:inherit; font-size:.82rem; }.learning-search button,.learning-button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:11px 23px; border:0; border-radius:25px; color:#fff; font:600 .8rem var(--font-sans); background:linear-gradient(115deg,#168eff,#0058ff); cursor:pointer; }
.learning-hero-art { position:relative; height:240px; display:flex; align-items:center; justify-content:center; padding-right:100px; }.learning-hero-art img { width:310px; height:240px; object-fit:contain; }.learning-book { position:absolute; right:0; min-width:170px; padding:10px 15px; border-radius:8px 5px 5px 8px; border-right:8px solid #fff9; box-shadow:0 5px 12px #183b6020; color:white; font-size:.85rem; font-weight:700; transform:rotate(-4deg); }.learning-book-blue { bottom:105px; background:linear-gradient(100deg,#20acff,#0064f3); }.learning-book-orange { bottom:62px; background:linear-gradient(100deg,#ffbf35,#ff8a16); right:9px; }.learning-book-green { bottom:19px; background:linear-gradient(100deg,#1ad9ad,#00ae80); right:0; }
.learning-directory { padding:22px 0 32px; background:linear-gradient(180deg,#fff,#f9fcff); }.learning-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:25px; }.learning-tabs a { display:flex; align-items:center; gap:9px; padding:10px 16px; border:1px solid #e5effc; border-radius:25px; color:#3c5786; background:#f4f8ff; font-size:.75rem; font-weight:500; }.learning-tabs a > span { display:grid; place-items:center; width:24px; height:24px; border-radius:7px; color:#fff; background:#8460f5; font-size:1rem; }.learning-tabs a:nth-child(2) > span { background:#ff3a65; }.learning-tabs a:nth-child(3) > span { background:#00ba8b; }.learning-tabs a:nth-child(5) > span { background:#0c93dc; }.learning-tabs a:nth-child(6) > span { background:#ffab18; }.learning-tabs .is-active { background:#0068ff; color:white; border-color:#0068ff; }.learning-tabs .is-active > span { background:transparent; }
.learning-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; }.learning-section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:13px; }.learning-section-heading h2 { display:flex; align-items:center; gap:10px; color:#10234c; margin:0; font-size:1.2rem; letter-spacing:-.025em; }.learning-section-heading h2 > span { color:#006aff; font-size:1.7rem; }.learning-section-heading > span { color:#627797; font-size:.75rem; }
.learning-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.learning-card { min-width:0; display:flex; flex-direction:column; border:1px solid #deebfc; border-radius:12px; padding:10px; background:white; box-shadow:0 4px 14px #0b4ea604; transition:border-color .18s,box-shadow .18s; }.learning-card:hover { border-color:#a3caff; box-shadow:0 7px 20px #0b4ea60d; }
.learning-card-art { position:relative; height:104px; border-radius:9px; display:flex; align-items:center; justify-content:center; gap:18px; background:linear-gradient(125deg,#e7f6ff,#eef0ff); overflow:hidden; }.learning-card[data-topic=images] .learning-card-art { background:linear-gradient(125deg,#e4faf2,#edfbff); }.learning-card[data-topic=security] .learning-card-art { background:linear-gradient(125deg,#f4eaff,#fff0f6); }.learning-card[data-topic=everyday] .learning-card-art { background:linear-gradient(125deg,#fff3e2,#fff9ef); }.learning-card-art small { position:absolute; top:7px; right:7px; padding:3px 7px; border-radius:13px; background:#ffffffc9; color:#48608d; font-size:.61rem; }.learning-art-icon { display:grid; place-items:center; width:51px; height:59px; border:1px solid #fff9; border-radius:11px; background:linear-gradient(140deg,#33b4ff,#006bff); color:white; transform:rotate(-7deg); box-shadow:0 5px 12px #0861a825; }.learning-card[data-topic=images] .learning-art-icon { background:linear-gradient(140deg,#27dbad,#00ab7e); }.learning-card[data-topic=security] .learning-art-icon { background:linear-gradient(140deg,#bd78ff,#8642ed); }.learning-card[data-topic=everyday] .learning-art-icon { background:linear-gradient(140deg,#ffc647,#ff8c24); }.learning-art-icon svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }.learning-art-arrow { color:#1482f8; font-size:2rem; font-weight:700; }.learning-art-page { display:grid; align-content:center; gap:6px; width:47px; height:62px; padding:9px; border-radius:7px; background:#ffffffd9; box-shadow:0 5px 12px #0861a815; transform:rotate(7deg); }.learning-art-page i { height:4px; border-radius:5px; background:#a7ceff; }.learning-art-page i:nth-child(2) { width:70%; }
.learning-card-copy { display:flex; flex-direction:column; flex:1; padding:12px 4px 3px; }.learning-card-copy > span { font-size:.61rem; font-weight:700; color:#0875e8; text-transform:uppercase; letter-spacing:.06em; }.learning-card h3 { margin:6px 0 7px; font-size:.87rem; line-height:1.45; letter-spacing:-.015em; }.learning-card h3 a { color:#10234c; }.learning-card p { color:#546e96; font-size:.78rem; line-height:1.65; margin:0 0 15px; }.learning-read-link { margin-top:auto; color:#0065f4; font-size:.76rem; font-weight:600; }.learning-read-link b { padding-left:4px; }
.learning-sidebar { display:grid; gap:14px; }.learning-side-card { padding:18px; background:white; border:1px solid #deebfc; border-radius:12px; }.learning-side-card h2 { font-size:.95rem; line-height:1.45; margin:0 0 9px; color:#10234c; letter-spacing:-.02em; }.learning-side-card h2 > span { color:#006aff; margin-right:5px; }.learning-side-card p { color:#4f6b93; font-size:.79rem; line-height:1.7; margin:0 0 15px; }.learning-start { background:radial-gradient(circle at 95% 90%,#c8e5ff,transparent 65%),#edf7ff; }.learning-side-symbol { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; background:linear-gradient(140deg,#21b5ff,#0064ff); color:white; font-weight:700; font-size:1.4rem; margin-bottom:10px; }.learning-featured > a { display:grid; grid-template-columns:24px minmax(0,1fr) 8px; align-items:center; gap:9px; padding:12px 0; border-top:1px solid #edf2fb; }.learning-featured strong { color:#2d4874; font-size:.73rem; line-height:1.55; font-weight:500; }.learning-featured a > span { display:grid; place-items:center; width:24px; height:27px; border-radius:6px; background:#eef4ff; color:#0070f2; }.learning-featured svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.learning-featured b { color:#006aff; }.learning-help { background:#f2f8ff; }.learning-help > a { display:block; color:#0066e9; font-size:.76rem; line-height:1.6; padding:6px 0; }.learning-empty { grid-column:1/-1; border:1px solid #deebfc; padding:30px; border-radius:12px; background:white; }.learning-empty h3 { color:#142950; }.learning-empty p { color:#5a7092; }.learning-empty a { color:#0067f2; }
.learning-directory :is(a,button):focus-visible,.learning-hero :is(a,button,input):focus-visible { outline:3px solid #71b0ff; outline-offset:3px; }
@media(max-width:1100px) { .learning-layout { grid-template-columns:minmax(0,1fr) 260px; gap:16px; }.learning-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.learning-hero-grid { gap:20px; }.learning-hero-art { padding-right:60px; }.learning-book { min-width:145px; font-size:.75rem; } }
@media(max-width:800px) { .learning-layout { grid-template-columns:minmax(0,1fr); }.learning-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }.learning-sidebar > :nth-child(2) { grid-column:1/-1; grid-row:2; }.learning-featured { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }.learning-hero-grid { grid-template-columns:1fr; }.learning-hero-art { display:none; }.learning-hero p { max-width:100%; }.learning-tabs a { padding:8px 12px; }.learning-tabs { gap:7px; } }
@media(max-width:500px) { .learning-cards,.learning-sidebar,.learning-featured { grid-template-columns:minmax(0,1fr); }.learning-hero { padding:15px 0 22px; }.lipicode-bold .learning-hero h1 { font-size:2.6rem; }.learning-hero p { font-size:.89rem; }.learning-search { gap:8px; padding-left:12px; }.learning-search button { padding:10px 15px; }.learning-search input { font-size:.75rem; }.learning-section-heading { align-items:flex-start; flex-direction:column; gap:5px; }.learning-card-art { height:120px; }.learning-tabs a { font-size:.69rem; padding:7px 10px; }.learning-tabs a > span { width:20px; height:20px; }.learning-card h3 { font-size:.96rem; }.learning-card p { font-size:.85rem; } }
/* Guide cards follow the same compact icon and content rhythm as All Tools. */
.learning-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.learning-card { display:grid; grid-template-columns:46px minmax(0,1fr); align-items:start; gap:14px; padding:19px; border-color:#dce8f9; box-shadow:none; }
.learning-guide-icon { display:grid; place-items:center; width:43px; height:46px; border-radius:9px; color:#fff; background:linear-gradient(135deg,#ff6e7e,#ff244f); box-shadow:inset 1px 1px 2px #ffffff60; }
.learning-guide-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.learning-card:nth-child(6n+2) .learning-guide-icon { background:linear-gradient(135deg,#35c5ff,#0066ff); }
.learning-card:nth-child(6n+3) .learning-guide-icon { background:linear-gradient(135deg,#ba78ff,#7c25fa); }
.learning-card:nth-child(6n+4) .learning-guide-icon { background:linear-gradient(135deg,#ff76cb,#ff168f); }
.learning-card:nth-child(6n+5) .learning-guide-icon { background:linear-gradient(135deg,#00e79e,#00a779); }
.learning-card:nth-child(6n+6) .learning-guide-icon { background:linear-gradient(135deg,#ffb455,#ff7019); }
.learning-card-copy { min-width:0; padding:0; height:100%; }
.learning-card-copy > span { color:#627898; font-size:.64rem; font-weight:600; letter-spacing:.045em; }
.learning-card h3 { font-size:.95rem; line-height:1.5; margin:6px 0 8px; font-weight:700; }
.learning-card p { font-size:.83rem; line-height:1.7; color:#526989; margin:0 0 17px; }
.learning-card-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:11px; border-top:1px solid #edf2fa; }
.learning-card-footer small { font-size:.7rem; color:#7285a0; }
.learning-read-link { margin:0; font-size:.74rem; white-space:nowrap; }
.learning-section-heading { margin-bottom:17px; }
@media(max-width:1100px) and (min-width:801px) { .learning-cards { grid-template-columns:1fr; } }
@media(max-width:600px) { .learning-cards { grid-template-columns:1fr; }.learning-card { padding:16px; gap:12px; }.learning-card h3 { font-size:.94rem; }.learning-card p { font-size:.82rem; } }