/* Mr-Robot: 1 CTF writeup */
.ctf-page { --ctf-line: #bdccd7; background: #fff; }
.ctf-page .main-nav { background: rgba(7,21,38,.97); }
.ctf-shell { width: min(100% - 40px, 940px); }
.ctf-back { display: inline-flex; margin-bottom: 45px; color: #9eb3c3; font: 500 .78rem/1.4 var(--font-mono); }
.ctf-back:hover { color: var(--teal-light); }
.ctf-hero { padding: 145px 0 88px; color: #e7eef3; background: radial-gradient(circle at 83% 18%, rgba(49,110,230,.24), transparent 29%), linear-gradient(135deg,#061322,#0b2137 62%,#142f49); border-bottom: 5px solid var(--amber); }
.ctf-meta, .ctf-tags { display: flex; flex-wrap: wrap; gap: 9px 20px; }
.ctf-meta { margin-bottom: 26px; color: #a5b7c5; font: 600 .68rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ctf-meta span:first-child { color: var(--teal-light); }
.ctf-hero h1 { margin-bottom: 22px; color: #f7f9fa; font-size: clamp(3.5rem,9vw,7rem); font-weight: 300; line-height: .9; letter-spacing: -.06em; }
.ctf-deck { max-width: 790px; margin: 0; color: #c0d0db; font-size: clamp(1.1rem,2vw,1.38rem); line-height: 1.75; }
.ctf-tags { margin-top: 30px; }
.ctf-tags span { padding: 6px 10px; color: #b9f1e9; background: rgba(86,215,200,.08); border: 1px solid rgba(86,215,200,.2); font: 500 .68rem/1.3 var(--font-mono); text-transform: uppercase; }
.ctf-content { padding: 58px 0 110px; }
.lab-notice { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; margin-bottom: 80px; padding: 24px; background: var(--amber-soft); border: 1px solid #edcd99; }
.lab-notice div { display: grid; gap: 7px; }
.lab-notice span, .ctf-index, .code-label, .finding-grid article > span, .key-result > span { font: 600 .65rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.lab-notice span { color: #986118; }
.lab-notice strong { color: var(--ink); font-size: .9rem; }
.lab-notice p { margin: 0; font-size: .88rem; }
.ctf-content section { padding: 65px 0; border-top: 1px solid var(--ctf-line); }
.ctf-content .ctf-intro { padding-top: 0; border-top: 0; }
.ctf-index { margin: 0 0 13px; color: var(--teal-dark); }
.ctf-content h2 { max-width: 760px; margin: 0 0 25px; font-size: clamp(2rem,4.5vw,3.35rem); font-weight: 300; letter-spacing: -.04em; }
.ctf-content section > p:not(.ctf-index), .ctf-content section > ul, .ctf-content section > ol { max-width: 790px; }
.ctf-content section > p { font-size: 1.02rem; line-height: 1.82; }
.ctf-content .lead { color: #29465e; font-size: 1.18rem; }
.cite { margin-left: 2px; color: var(--teal-dark); font: 600 .7rem/1 var(--font-mono); vertical-align: super; }
.spoiler, .lesson { margin-top: 30px; padding: 23px 25px; border-left: 4px solid var(--amber); background: var(--surface-warm); }
.spoiler strong, .lesson strong { color: #865716; }
.spoiler p, .lesson p { margin: 6px 0 0; }
.attack-chain { display: grid; grid-template-columns: repeat(3,1fr); padding: 0; list-style: none; border-top: 1px solid var(--ctf-line); border-left: 1px solid var(--ctf-line); }
.attack-chain li { min-height: 170px; padding: 22px; border-right: 1px solid var(--ctf-line); border-bottom: 1px solid var(--ctf-line); }
.attack-chain li > span { display: block; margin-bottom: 26px; color: var(--teal-dark); font: 600 .68rem/1 var(--font-mono); }
.attack-chain strong { color: var(--ink); }
.attack-chain p { margin: 7px 0 0; font-size: .86rem; line-height: 1.55; }
code { padding: .1em .3em; color: #9a4e10; background: #fff2e3; border-radius: 3px; font: .9em/1.4 var(--font-mono); }
.code-block { max-width: 850px; margin: 28px 0; overflow: hidden; background: #061321; border: 1px solid #294259; border-radius: 7px; box-shadow: var(--shadow-sm); }
.code-label { padding: 12px 16px; color: #7fa2bb; background: #0a1c2e; border-bottom: 1px solid #294259; }
.code-block pre { overflow-x: auto; margin: 0; padding: 21px; }
.code-block code { padding: 0; color: #c8d6e0; background: transparent; font-size: .82rem; line-height: 1.75; }
.key-result { max-width: 790px; margin-top: 28px; padding: 24px; background: #eaf7f4; border: 1px solid #b9e2d9; }
.key-result > span { display: block; margin-bottom: 8px; color: var(--teal-dark); }
.key-result strong { color: var(--ink); }
.key-result p { margin: 6px 0 0; font-size: .86rem; }
.key-root { background: #eef3fc; border-color: #c5d4f0; }
.key-root > span { color: var(--blue-dark); }
.finding-grid { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 35px; border-top: 1px solid var(--ctf-line); border-left: 1px solid var(--ctf-line); }
.finding-grid article { padding: 25px; border-right: 1px solid var(--ctf-line); border-bottom: 1px solid var(--ctf-line); }
.finding-grid article > span { display: block; margin-bottom: 14px; color: var(--teal-dark); }
.finding-grid article:nth-child(n+3) > span { color: var(--success); }
.finding-grid h3 { margin-bottom: 8px; font-size: 1.05rem; }
.finding-grid p { margin: 0; font-size: .88rem; }
.takeaways { margin-inline: calc((940px - min(100vw - 40px,1100px))/2); padding-inline: max(20px,calc((min(100vw - 40px,1100px) - 940px)/2)) !important; background: var(--surface-blue); border: 1px solid var(--ctf-line) !important; }
.takeaway-list { max-width: 820px; border-top: 1px solid var(--ctf-line); }
.takeaway-list article { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--ctf-line); }
.takeaway-list article > span { color: var(--teal-dark); font: 600 .68rem/1.5 var(--font-mono); }
.takeaway-list h3 { margin-bottom: 7px; font-size: 1.08rem; }
.takeaway-list p { margin: 0; }
.reflection { max-width: 820px !important; margin: 35px 0 0; color: #25435b; font-size: 1.15rem !important; }
.sources ol { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--ctf-line); }
.sources li { display: grid; grid-template-columns: minmax(260px,.85fr) 1.15fr; gap: 25px; padding: 20px 0; border-bottom: 1px solid var(--ctf-line); }
.sources a { color: var(--ink); font-weight: 600; }
.sources a:hover { color: var(--blue); }
.sources span { color: var(--text-muted); font-size: .88rem; }
.ctf-pagination { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 70px; border: 1px solid var(--ctf-line); }
.ctf-pagination a { display: grid; gap: 6px; min-height: 100px; padding: 22px; color: var(--ink); }
.ctf-pagination a + a { border-left: 1px solid var(--ctf-line); text-align: right; }
.ctf-pagination span { color: var(--text-soft); font: 600 .62rem/1.3 var(--font-mono); text-transform: uppercase; }
.ctf-pagination a:hover { background: var(--surface-blue); }
@media (max-width: 760px) {
    .lab-notice { grid-template-columns: 1fr; gap: 12px; }
    .attack-chain { grid-template-columns: repeat(2,1fr); }
    .sources li { grid-template-columns: 1fr; gap: 7px; }
}
@media (max-width: 560px) {
    .ctf-shell { width: min(100% - 28px,940px); }
    .ctf-hero { padding: 120px 0 65px; }
    .ctf-hero h1 { font-size: clamp(3.4rem,20vw,5.2rem); }
    .attack-chain, .finding-grid { grid-template-columns: 1fr; }
    .attack-chain li { min-height: 0; }
    .takeaways { margin-inline: -7px; padding-inline: 21px !important; }
    .code-block { margin-inline: -7px; }
    .code-block::after { content: "Swipe code horizontally →"; display: block; padding: 8px 14px 10px; color: #7fa2bb; background: #0a1c2e; border-top: 1px solid #294259; font: 600 .6rem/1.3 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
    .ctf-pagination { grid-template-columns: 1fr; }
    .ctf-pagination a + a { border-top: 1px solid var(--ctf-line); border-left: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }