.mc-case-sections{padding-bottom:40px}.mc-case-example{color:#45c6ce;font-size:12px}.mc-case-nav{display:flex;gap:10px;flex-wrap:wrap;padding-block:24px}.mc-case-nav a{color:inherit;text-decoration:none;font-size:13px;padding:10px 16px;border:1px solid #22b8cf35;border-radius:30px;background:#2da7b30a}.mc-case-section{padding-block:48px;scroll-margin-top:110px;border-top:1px solid #55a3bb25}.mc-case-section>header{margin-bottom:28px}.mc-case-section>header span{font:11px monospace;letter-spacing:2px;color:#159ba9}.mc-case-section h2{font-size:clamp(26px,4vw,42px);margin:12px 0}.mc-case-prose{max-width:950px;font-size:17px;line-height:2}.mc-case-timeline{display:grid;grid-template-columns:1fr 1.5fr;gap:24px}.mc-case-timeline ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}.mc-case-timeline button{display:flex;align-items:center;gap:15px;text-align:start;width:100%;padding:20px;border:1px solid #24b8c440;border-radius:16px;background:#24b8c408;color:inherit;font:inherit;cursor:pointer}.mc-case-timeline button[aria-pressed=true]{border-color:#1eb9be;background:#24b8c418}.mc-case-timeline button b{color:#119ba9;font:12px monospace}.mc-case-timeline button span{flex:1}.mc-case-timeline svg{width:18px}.mc-case-metrics article,.mc-case-timeline article{padding:32px;border:1px solid #24b8c440;border-radius:22px;background:#24b8c40b}.mc-case-timeline article h3{font-size:26px}.mc-case-timeline article p{line-height:2;white-space:pre-line}.mc-case-timeline article small{color:#159ba9}.mc-case-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:24px}.mc-case-metrics strong{font-size:clamp(32px,5vw,56px);color:#139fae}.mc-case-metrics h3{font-size:17px}.mc-case-metrics p{font-size:12px;line-height:1.8}.mc-case-compare-frame{position:relative;aspect-ratio:16/10;background:#071d30;border:1px solid #24b8c440;border-radius:20px;overflow:hidden}.mc-case-compare-frame img,.mc-case-compare-frame picture{display:block;width:100%;height:100%;object-fit:contain}.mc-case-before{position:absolute;inset:0;background:#071d30}.mc-case-compare-frame>i{position:absolute;inset-block:0;width:2px;background:#3ee4df;pointer-events:none}.mc-case-compare-frame>i span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;display:grid;place-items:center;background:#10a8b8;color:#fff;border-radius:50%;font-style:normal}.mc-case-after-label,.mc-case-before-label{position:absolute;top:15px;background:#031322dc;color:#e6fbff;padding:8px 16px;border-radius:25px;font-size:12px}.mc-case-before-label{left:15px}.mc-case-after-label{right:15px}.mc-case-range{display:grid;gap:16px;margin-top:20px;font-size:13px}.mc-case-range input{width:100%;accent-color:#139fae;direction:ltr}.mc-case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.mc-case-gallery button{border:1px solid #24b8c440;padding:12px;background:#24b8c405;border-radius:18px;cursor:zoom-in;max-height:500px;overflow:hidden}.mc-case-gallery button:disabled{cursor:default}.mc-case-gallery img,.mc-case-gallery picture{display:block;width:100%;height:100%;max-height:470px;object-fit:contain}.mc-case-sections :focus-visible{outline:2px solid #19adbb;outline-offset:4px}.admin-case-order{display:grid;gap:10px}.admin-case-order>div{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #22b8cf30;border-radius:12px}.admin-case-order label{flex:1}.admin-case-order button{padding:7px 12px}.admin-case-editor details{margin-top:24px}.admin-case-editor summary{cursor:pointer;padding:15px}.admin-case-editor .mc-case-section{width:100%;max-width:100%;padding-inline:12px}.admin-case-editor .mc-case-nav{padding-inline:12px}@media(max-width:700px){.mc-case-gallery,.mc-case-timeline{grid-template-columns:1fr}.mc-case-section{padding-block:32px}.mc-case-timeline article{padding:24px}.mc-case-prose{font-size:15px}}.mc-case-compare-frame>i svg{width:18px;transform:rotate(90deg)}.mc-case-sections{color:#173047}html[data-theme=dark] .mc-case-sections{color:#e4f0f8}.reference-project-page .mc-case-sections :is(h2,h3,p,button,a){color:inherit}.reference-project-page .mc-case-sections .mc-case-metrics strong{color:#159eaf}html[data-theme=light] .mc-case-nav a{background:#ffffffa8;border-color:#197f9c40}html[data-theme=light] .mc-case-metrics article,html[data-theme=light] .mc-case-timeline article{background:#ffffffb8}