/* Mirror Marketing: projects/mirror-marketing/design.md. Offline brand assets. */
@font-face{font-family:Barlow;src:url('assets/Barlow-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/Barlow-SemiBold.otf') format('opentype');font-weight:500 600;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/Barlow-Bold.otf') format('opentype');font-weight:650 900;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/Montserrat-ExtraBold.otf') format('opentype');font-weight:800;font-display:swap}
:root{--paper:#1b1b1b;--ink:#fff;--blue:#83d1f0;--pale:#22333c;--warm:#83d1f0;--muted:#c4c4c4;--line:#484848;--green:#22c55e;--red:#ff9292;--surface:#262626;--gold:#f2c92e}
body{font-family:Barlow,Arial,sans-serif;font-size:19px}
.masthead{padding-top:25px;padding-bottom:25px}
.masthead>a{gap:24px}
.brand-logo{display:block;width:174px;height:auto}
.guide-label{border-left:1px solid var(--line);padding-left:24px;max-width:180px;font-size:12px;line-height:1.6;letter-spacing:2px}
.edition{font-size:13px}
nav{border-top-color:var(--blue)}
nav button{font-size:14px;border-radius:4px}
nav button[aria-current],.primary,.chips button[aria-pressed=true],.release-track button.current{background:var(--blue);border-color:var(--blue);color:var(--paper)}
button{border-radius:4px}
button:hover{background:#343434}
.primary:hover,nav button[aria-current]:hover{background:#b5e5f8;color:#1b1b1b}
h1,h2,h3,.big-quote{font-family:Montserrat,Arial,sans-serif;font-weight:800}
h1{font-size:clamp(54px,4.4vw,68px);letter-spacing:-2px;line-height:1.08}
h2{font-size:42px}h3{font-size:28px}
.eyebrow{font-size:12px;letter-spacing:2px}

.takeaway{border-top:2px solid var(--blue)}
.takeaway .eyebrow{color:var(--gold)}
.takeaway p{font-family:Barlow,Arial,sans-serif;font-weight:500}.release-track button,.api-scene{background:var(--surface);border-radius:4px}.release-track button.past{background:#193a27}







.search input{background:#262626;color:#fff;border-color:#888}




.api-route .icon{background:var(--pale)}
.api-boundary{border-color:var(--line)}
.skip{background:#1b1b1b;color:var(--blue)}
::selection{background:var(--blue);color:#1b1b1b}
@media(max-width:1300px){nav button{font-size:13px}}
@media(max-width:680px){
 .masthead{padding:20px;gap:12px}.masthead>a{gap:0}.brand-logo{width:150px}.guide-label{display:none}
 h1{font-size:51px;letter-spacing:-1.7px}h2{font-size:38px}h3{font-size:28px}
 nav button{font-size:14px}.hero .intro{font-size:19px}.takeaway p{font-size:24px}{font-size:22px}.term h3{font-size:27px}
}
/* Keep the light teaching example readable inside the dark workshop. */


/* V3: board, example sections, flashcards, developer questions on the dark surface. */
.slab{background:var(--surface);border-color:var(--line);box-shadow:0 10px 0 -4px #0e0e0e}.slab-label{border-right-color:var(--line);color:var(--ink)}.slab-label .icon{color:var(--blue)}.slab-label:hover{background:#2f2f2f}
.tile,.card,.trail button,.qa-list button{background:#1f1f1f;border-color:var(--line);color:var(--ink)}.tile:hover{border-color:var(--blue)}
.panel{background:var(--surface);color:var(--ink);border-color:var(--line);border-left-color:var(--blue)}.panel h3{font-family:Montserrat,Arial,sans-serif;font-weight:800}.panel dt{color:var(--blue)}.panel-close{background:transparent;color:var(--ink);border-color:var(--line)}.panel .code{background:#121212;color:#f7f4ed}.xref:hover{background:#2b4a5a}.panel-empty .icon{color:var(--blue)}
.bubble.dev{background:#2a2a2a}.bubble.you{background:var(--pale)}.bubble .speaker{color:var(--blue)}
.tile[aria-pressed=true],.trail button[aria-pressed=true],.qa-list button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.tile[aria-pressed=true] span,.trail button[aria-pressed=true] span{color:#2b4a5a}
.tile strong,.trail strong,.slab-label strong{font-family:Montserrat,Arial,sans-serif;font-weight:800}
.trail button:before{background:var(--blue);color:var(--paper)}
.example{background:var(--surface);border-left-color:var(--gold)}.example .eyebrow{color:var(--gold)}
.map-card{background:var(--pale)}.map-card dt{color:var(--blue)}.map-card h3{font-size:30px}.card-close{background:transparent;color:var(--ink)}
.card h2{font-size:44px}.card .card-text{font-family:Barlow,Arial,sans-serif;font-weight:500}
.layer-head p{color:var(--muted)}.sentence button{color:var(--blue)}
@media(max-width:680px){.slab{box-shadow:0 6px 0 -3px #0e0e0e}.slab-label{border-bottom-color:var(--line)}}