/* Option D — hybrid: A's opening, skimmable work, boxed skills, calm motion */
:root {
  --bg: #f6f7f1; --surface: #ffffff; --surface-2: #eef0e5;
  --text: #22261d; --text-muted: #5f665a; --text-dim: #9ca496; --border: #dfe3d4;
  --accent: #6b7d4f; --accent-soft: #e9eddc; --healthy: #4f9a6c;
  --heading: #5a4632;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.07);
  --serif: "Source Serif 4", Georgia, serif; --sans: "Source Sans 3", system-ui, -apple-system, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --container: 1080px; --radius: 14px; --header-h: 60px;
}
:root[data-theme="dark"] {
  --bg: #161813; --surface: #1d201a; --surface-2: #242820;
  --text: #ebece6; --text-muted: #a8ab9f; --text-dim: #6d7166; --border: #2d3128;
  --accent: #aebd8a; --accent-soft: #2a3021; --healthy: #4f9a6c;
  --heading: var(--text);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { margin: 0; font-family: var(--sans); font-size: 1.14rem; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; transition: background .25s, color .25s; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; color: var(--heading); }
p { margin: 0 0 1em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; display: block; }
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.muted { color: var(--text-muted); font-family: var(--sans); font-weight: 500; font-size: .85em; }
.skip-link { position: absolute; left: 1rem; top: -100px; padding: .5rem 1rem; background: var(--accent); color: #fff; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ambient glow — very slow drift behind the intro */
.glow { position: absolute; top: -10%; left: 0; right: 0; height: 60vh; pointer-events: none; z-index: 0; contain: strict; will-change: transform;
  background: radial-gradient(38% 50% at 72% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
              radial-gradient(32% 42% at 18% 60%, color-mix(in srgb, #326CE5 10%, transparent), transparent 70%);
  animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4%, 6%, 0) scale(1.08); } }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { font-family: var(--serif); font-weight: 600; color: var(--heading); font-size: 1.1rem; } .brand:hover { text-decoration: none; }
.nav-menu { display: flex; align-items: center; gap: 1.5rem; } .nav-menu a { color: var(--text-muted); font-size: 1rem; font-weight: 500; }
.nav-menu a:hover, .nav-menu a.active { color: var(--text); text-decoration: none; }
.theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: transform .2s; }
.nav-menu a.nav-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: transform .2s, color .2s, border-color .2s; }
.nav-menu a.nav-icon:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.theme-toggle:hover { transform: rotate(15deg); } .icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; } :root[data-theme="dark"] .icon-moon { display: block; }
@media (max-width: 760px) { .nav-menu li { display: none; } .nav-menu li:has(.nav-icon), .nav-menu li:has(.theme-toggle) { display: block; } .nav-menu { gap: .75rem; } }

/* intro */
.intro { position: relative; z-index: 1; padding-block: 4.5rem 1.5rem; display: grid; grid-template-columns: minmax(0, 60ch) 1fr; column-gap: 4rem; align-items: start; }
.intro-head { grid-column: 1 / -1; }
.intro-text { max-width: 66ch; }
.intro-side { border-left: 1px solid var(--border); padding-left: 2.5rem; }
.intro-text p, .intro-side p { text-align: justify; }
.bullets li { text-align: justify; }
.intro-side p { color: var(--text-muted); margin: 0; }
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; gap: 2.5rem; }
  .intro-side { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 2rem; }
}
.role { color: var(--accent); font-weight: 600; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .6rem; }
.intro h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: .5em; }
.lede { font-size: 1.22rem; } .intro-text p { color: var(--text); } .intro-text p:not(.lede):not(.role) { color: var(--text-muted); }
.certs-inline { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.5rem; }
.certs-inline li { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .35rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .95rem; font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn { display: inline-flex; align-items: center; padding: .75rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: 1rem; border: 1px solid transparent; transition: transform .15s, box-shadow .2s, border-color .2s; }
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-primary { background: var(--accent); color: #fff; } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }
.intro-diagram { margin: 0; }
.intro-diagram figcaption { text-align: center; color: var(--text-dim); font-size: .85rem; margin-top: .75rem; }
@media (max-width: 900px) { .intro { padding-top: 3rem; } }

/* Argo CD-style application tree */
.argo { width: 100%; height: auto; display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 6px 10px; --ok: #18be94; --warn: #f4c030; --argo: #ef7b4d; }
:root[data-theme="dark"] .argo { --ok: #2fd3a6; --warn: #f6cf4f; }
.argo text { font-family: var(--sans); }
.argo .hdr-app { font-size: 14px; font-weight: 700; fill: var(--text); }
.argo .hdr-meta { font-size: 10px; fill: var(--text-dim); font-family: var(--mono); }
.argo .hs text { font-size: 12px; font-weight: 600; fill: var(--text-muted); }
.argo .hs-synced circle { fill: var(--ok); } .argo .hs-healthy .heart { fill: var(--ok); }
.argo .spin { stroke: var(--warn); transform-box: fill-box; transform-origin: center; animation: spin 1.1s linear infinite; }
.argo .ln { fill: none; stroke: var(--border); stroke-width: 1.4; }
.argo .rn-box { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
:root[data-theme="dark"] .argo .rn-box { fill: var(--surface-2); }
.argo .kind { fill: #8fa4b1; } .argo .kind-app { fill: var(--argo); } .argo .kind-dep { fill: #5b8def; } .argo .kind-pod { fill: #6cb2f0; } .argo .kind-rs { fill: #7fa8d8; } .argo .kind-svc { fill: #9e8cf0; } .argo .kind-ing { fill: #8fa4b1; }
.argo .kind-lbl { font-size: 9px; font-weight: 700; fill: #fff; letter-spacing: .02em; }
.argo .rn-name { font-size: 12px; font-weight: 600; fill: var(--text); }
.argo .rn-kind { font-size: 9.5px; fill: var(--text-dim); }
.argo .st .heart { fill: var(--ok); } .argo .st .synced circle { fill: var(--ok); }
/* default (static) state: healthy + synced, no spinners, new RS/pods hidden, old visible */
.argo .st .spin, .argo .hs-syncing, .argo .hs-progressing { opacity: 0; }
.argo .n-new, .argo .ln-new { opacity: 0; }


/* CI/CD pipeline */
.argo .pl-name { font-size: 13px; font-weight: 600; fill: var(--text); }
.argo .pl-detail { font-size: 10.5px; fill: var(--text-muted); font-family: var(--mono); }
.argo .pl-time { font-size: 10.5px; fill: var(--text-dim); font-family: var(--mono); }
.argo .rail { stroke: var(--border); stroke-width: 2; }
.argo .seg { stroke: var(--ok); stroke-width: 2; opacity: 0; }
.argo .st-pend circle { fill: var(--surface); stroke: var(--border); stroke-width: 2; }
.argo .st-run { opacity: 0; } .argo .st-done { opacity: 0; } .argo .st-done circle { fill: var(--ok); }
.argo .pl-time { opacity: 0; }
/* static (reduced motion / no JS): show everything done */
.argo:not(.live) .st-pend { opacity: 0; } .argo:not(.live) .st-done, .argo:not(.live) .pl-time, .argo:not(.live) .seg { opacity: 1; }
.argo.live .s1 .st-pend { animation: pend1 16s linear infinite; }
.argo.live .s1 .st-run  { animation: run1 16s linear infinite; }
.argo.live .s1 .st-done, .argo.live .s1 .pl-time { animation: done1 16s linear infinite; }
.argo.live .s2 .st-pend { animation: pend2 16s linear infinite; }
.argo.live .s2 .st-run  { animation: run2 16s linear infinite; }
.argo.live .s2 .st-done, .argo.live .s2 .pl-time { animation: done2 16s linear infinite; }
.argo.live .s3 .st-pend { animation: pend3 16s linear infinite; }
.argo.live .s3 .st-run  { animation: run3 16s linear infinite; }
.argo.live .s3 .st-done, .argo.live .s3 .pl-time { animation: done3 16s linear infinite; }
.argo.live .s4 .st-pend { animation: pend4 16s linear infinite; }
.argo.live .s4 .st-run  { animation: run4 16s linear infinite; }
.argo.live .s4 .st-done, .argo.live .s4 .pl-time { animation: done4 16s linear infinite; }
.argo.live .s5 .st-pend { animation: pend5 16s linear infinite; }
.argo.live .s5 .st-run  { animation: run5 16s linear infinite; }
.argo.live .s5 .st-done, .argo.live .s5 .pl-time { animation: done5 16s linear infinite; }
.argo.live .seg1 { animation: seg1 16s linear infinite; }
.argo.live .seg2 { animation: seg2 16s linear infinite; }
.argo.live .seg3 { animation: seg3 16s linear infinite; }
.argo.live .seg4 { animation: seg4 16s linear infinite; }
@keyframes pend1 { 0%,2% {opacity:1} 3%,93% {opacity:0} 96%,100% {opacity:1} }
@keyframes run1  { 0%,2% {opacity:0} 3%,9% {opacity:1} 10%,100% {opacity:0} }
@keyframes done1 { 0%,9% {opacity:0} 10%,93% {opacity:1} 96%,100% {opacity:0} }
@keyframes seg1  { 0%,9% {opacity:0} 12%,93% {opacity:1} 96%,100% {opacity:0} }
@keyframes pend2 { 0%,9% {opacity:1} 10%,93% {opacity:0} 96%,100% {opacity:1} }
@keyframes run2  { 0%,9% {opacity:0} 10%,35% {opacity:1} 36%,100% {opacity:0} }
@keyframes done2 { 0%,35% {opacity:0} 36%,93% {opacity:1} 96%,100% {opacity:0} }
@keyframes seg2  { 0%,35% {opacity:0} 38%,93% {opacity:1} 96%,100% {opacity:0} }
@keyframes pend3 { 0%,35% {opacity:1} 36%,93% {opacity:0} 96%,100% {opacity:1} }
@keyframes run3  { 0%,35% {opacity:0} 36%,47% {opacity:1} 48%,100% {opacity:0} }
@keyframes done3 { 0%,47% {opacity:0} 48%,93% {opacity:1} 96%,100% {opacity:0} }
@keyframes seg3  { 0%,47% {opacity:0} 50%,93% {opacity:1} 96%,100% {opacity:0} }
@keyframes pend4 { 0%,47% {opacity:1} 48%,93% {opacity:0} 96%,100% {opacity:1} }
@keyframes run4  { 0%,47% {opacity:0} 48%,61% {opacity:1} 62%,100% {opacity:0} }
@keyframes done4 { 0%,61% {opacity:0} 62%,93% {opacity:1} 96%,100% {opacity:0} }
@keyframes seg4  { 0%,61% {opacity:0} 64%,93% {opacity:1} 96%,100% {opacity:0} }
@keyframes pend5 { 0%,61% {opacity:1} 62%,93% {opacity:0} 96%,100% {opacity:1} }
@keyframes run5  { 0%,61% {opacity:0} 62%,79% {opacity:1} 80%,100% {opacity:0} }
@keyframes done5 { 0%,79% {opacity:0} 80%,93% {opacity:1} 96%,100% {opacity:0} }

/* rollout cycle — 14s (legacy tree, unused) */
.argo.live .hs-synced     { animation: hideMid 14s ease-in-out infinite; }
.argo.live .hs-syncing    { animation: showMid 14s ease-in-out infinite; }
.argo.live .hs-healthy    { animation: hideMid2 14s ease-in-out infinite; }
.argo.live .hs-progressing{ animation: showMid2 14s ease-in-out infinite; }
.argo.live .n-new, .argo.live .ln-new { animation: newIn 14s ease-in-out infinite; }
.argo.live .n-new .heart  { animation: heartIn 14s ease-in-out infinite; }
.argo.live .n-new .spin   { animation: spin 1.1s linear infinite, spinNew 14s ease-in-out infinite; }
.argo.live .n-old, .argo.live .ln-old { animation: oldOut 14s ease-in-out infinite; }
.argo.live .n-dep-roll .st-health .heart { animation: heartIn 14s ease-in-out infinite; }
.argo.live .n-dep-roll .st-health .spin  { animation: spin 1.1s linear infinite, spinDep 14s ease-in-out infinite; }
.argo.live .n-app .st-sync .synced { animation: hideMid 14s ease-in-out infinite; }
.argo.live .n-app .st-sync .spin   { animation: spin 1.1s linear infinite, showMid 14s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
/* app sync: synced → syncing (8%–58%) → synced */
@keyframes hideMid  { 0%,7% {opacity:1} 9%,57% {opacity:0} 60%,100% {opacity:1} }
@keyframes showMid  { 0%,7% {opacity:0} 9%,57% {opacity:1} 60%,100% {opacity:0} }
/* app health: healthy → progressing (12%–52%) → healthy */
@keyframes hideMid2 { 0%,11% {opacity:1} 13%,51% {opacity:0} 54%,100% {opacity:1} }
@keyframes showMid2 { 0%,11% {opacity:0} 13%,51% {opacity:1} 54%,100% {opacity:0} }
/* new RS + pods: appear at 16%, stay, vanish at the very end for the loop */
@keyframes newIn    { 0%,14% {opacity:0} 20%,94% {opacity:1} 98%,100% {opacity:0} }
/* new pods' status: spinner 16%–40%, then heart */
@keyframes spinNew  { 0%,15% {opacity:0} 18%,38% {opacity:1} 41%,100% {opacity:0} }
@keyframes heartIn  { 0%,40% {opacity:0} 44%,100% {opacity:1} }
/* deployment being rolled: spinner 12%–52% */
@keyframes spinDep  { 0%,11% {opacity:0} 13%,51% {opacity:1} 54%,100% {opacity:0} }
/* old RS + pods: fade to terminating at 44%, gone by 54%, back for loop */
@keyframes oldOut   { 0%,42% {opacity:1} 46% {opacity:.45} 54%,93% {opacity:0} 97%,100% {opacity:1} }

/* numbers */

/* sections */
.section { padding-block: 4.5rem; }
.intro + .section { padding-top: 2.5rem; }
.section + .section { border-top: 1px solid var(--border); }
.section-title { font-size: clamp(1.7rem, 3.5vw, 2.2rem); margin-bottom: .5rem; }
.section-lede { color: var(--text-muted); margin-bottom: 2rem; max-width: 60ch; }
.subheading { font-family: var(--sans); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 1rem; }

/* work cards */
.work-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.8rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 2.5rem; align-items: start; }
.card > .card-stat, .card > h3, .card > p, .card > .tags { grid-column: 1; }
.card > .how { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.card-stat { font-size: .82rem; font-weight: 700; color: var(--accent); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .4rem; }
.card h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.card > p:not(.card-stat) { color: var(--text-muted); font-size: 1.02rem; margin-bottom: .9rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tags li { padding: .25rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 500; background: var(--accent-soft); color: var(--accent); }
.card .how { border-left: 1px solid var(--border); padding-left: 2rem; }
.card .how p { font-size: .95rem; color: var(--text-muted); margin: .6rem 0 0; } .card .how b { color: var(--text); font-weight: 600; }
.card .how-label { margin: 0; font-size: .92rem; font-weight: 600; color: var(--text-muted); }
@media (max-width: 900px) {
  .card { grid-template-columns: 1fr; }
  .card > .how { grid-column: 1; grid-row: auto; margin-top: 1rem; border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: .8rem; }
}


/* experience */
.timeline { position: relative; padding-left: 1.5rem; border-left: 2px solid var(--border); display: grid; gap: 2rem; margin-top: 1.5rem; }
.timeline-item { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 1.5rem; }
.timeline-item::before { content: ""; position: absolute; left: calc(-1.5rem - 7px); top: .5rem; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.timeline-date { color: var(--text-muted); font-size: .95rem; font-weight: 500; padding-top: .3rem; }
.timeline-item h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.bullets { list-style: disc; padding-left: 1.2rem; display: grid; gap: .4rem; color: var(--text-muted); font-size: 1.02rem; } .bullets li::marker { color: var(--accent); }
@media (max-width: 700px) { .timeline-item { grid-template-columns: 1fr; gap: .25rem; } }
.edu-row { margin-top: 1.5rem; }
.edu-list { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.edu-list li { display: flex; align-items: center; gap: .9rem; }
.edu-list strong { display: block; font-weight: 700; font-size: 1.05rem; } .edu-program { display: block; font-size: 1rem; color: var(--text); } .edu-meta { display: block; color: var(--text-muted); font-size: .92rem; }
.edu-list li { align-items: flex-start; } .edu-logo { margin-top: .15rem; }
.edu-logo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; }
.edu-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
@media (max-width: 900px) { .edu-list { grid-template-columns: 1fr; } }

/* beyond work */
.hobby-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 960px) { .hobby-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hobby { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; transition: transform .25s, box-shadow .25s; }
.hobby:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.hobby-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); font-size: 1.25rem; margin-bottom: .8rem; }
.hobby h3 { font-size: 1.1rem; margin-bottom: .2rem; } .hobby p { color: var(--text-muted); font-size: 1rem; margin: 0; }
.now { margin-top: 1.5rem; color: var(--text-muted); display: flex; align-items: center; gap: .6rem; font-size: 1.02rem; } .now b { color: var(--text); }
.now-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--healthy); box-shadow: 0 0 0 0 color-mix(in srgb, var(--healthy) 50%, transparent); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--healthy) 45%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 700px) { .hobby-grid { grid-template-columns: 1fr; } }

/* contact + footer */
.contact { text-align: center; } .contact .section-lede { margin-inline: auto; } .contact .actions { justify-content: center; }
.site-footer { border-top: 1px solid var(--border); padding-block: 1.75rem; font-size: .95rem; color: var(--text-muted); }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-inner p { margin: 0; } .footer-inner a { color: var(--text-muted); }

/* reveal on scroll (staggered) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d, 0ms); }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow, .now-dot { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .skill-box, .hobby, .btn { transition: none; }
  .argo.live *, .argo .spin { animation: none !important; }
  .argo .st-pend { opacity: 0; } .argo .st-done, .argo .pl-time, .argo .seg { opacity: 1; }
}

/* platform concepts */
.concepts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 960px) { .concepts-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.concept { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.25rem 1.1rem; transition: border-color .25s, box-shadow .25s, transform .25s; }
.concept:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow); transform: translateY(-3px); }

.concept-title { font-size: 1.1rem; margin-bottom: .45rem; }
.concept p { color: var(--text-muted); font-size: .92rem; line-height: 1.6; margin: 0; }
.concept code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: .1em .35em; border-radius: 4px; color: var(--text); }
@media (max-width: 620px) { .concepts-grid { grid-template-columns: 1fr; } }
.concept .practice { margin-top: .85rem; padding: .65rem .85rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; color: var(--text); font-size: .88rem; line-height: 1.5; }
.concept .practice b { color: var(--accent); font-weight: 700; margin-right: .35rem; }
.whw { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; row-gap: .45rem; align-items: baseline; }
.whw dt { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding-top: .15rem; }
.whw dd { margin: 0; color: var(--text-muted); font-size: .97rem; line-height: 1.5; }
.whw dd code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: .05em .3em; border-radius: 4px; color: var(--text); }
.concept-title { font-size: 1.05rem; margin-bottom: .7rem; }

/* toolbox strip */
.toolbox { margin-top: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tb-row { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center; padding: .9rem 1.25rem; border-top: 1px solid var(--border); transition: background .25s; }
.tb-row:first-child { border-top: 0; }
.tb-label { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); transition: color .25s; }
.tb-row .tags li { background: var(--surface-2); color: var(--text); }
@media (max-width: 700px) { .tb-row { grid-template-columns: 1fr; gap: .5rem; } }