*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0}.mist-project{--lime:#deff00;--ink:#12132f;--purple:#dfe3ff;color:var(--ink);background:#f8f8f2;font-family:Arial,"Microsoft YaHei",sans-serif}.mist-project a{color:inherit;text-decoration:none}.mist-project button{font:inherit;color:inherit;cursor:pointer}.mist-project :focus-visible{outline:3px solid #6360cf;outline-offset:5px}.mist-nav{height:72px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;background:var(--lime);border-bottom:1px solid var(--ink);position:sticky;top:0;z-index:5}.brand{font-weight:900;font-size:22px;letter-spacing:-1px}.brand span{font:10px monospace;letter-spacing:1px;margin-left:14px}.mist-nav>div{display:flex;gap:28px;font-size:13px}.mist-nav>div a{padding:10px 0;border-bottom:2px solid transparent}.mist-nav>div a:hover,.mist-nav a[aria-current]{border-color:var(--ink)}.intro{background:var(--lime);padding:64px 5% 48px}.eyebrow{font:11px monospace;letter-spacing:2px}.intro h1{font-size:clamp(72px,14.7vw,230px);letter-spacing:-.075em;line-height:.9;margin:30px 0;font-weight:950}.intro h1 span{display:block;font-size:clamp(22px,3.2vw,44px);letter-spacing:-.04em;line-height:1.4;margin-top:25px}.intro-bottom{display:flex;align-items:end;justify-content:space-between;border-top:1px solid var(--ink);padding-top:24px;margin-top:35px}.intro-bottom p{font-size:15px;line-height:1.9;margin:0}.explore{display:flex;gap:45px;align-items:center;font-size:14px}.explore span{font-size:35px}.chapter{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);gap:5%;padding:72px 5%;border-bottom:1px solid #12132f28;align-items:start;max-width:1800px;margin:auto}.chapter-copy{position:sticky;top:120px;padding-top:8px}.chapter-number{font:11px monospace;letter-spacing:1px}.chapter h2{font-size:clamp(26px,3vw,46px);letter-spacing:-.05em;line-height:1.35;margin:28px 0 20px}.chapter p{font-size:14px;line-height:1.9;max-width:300px;color:#50516b}.tags{display:flex;gap:10px;margin-top:25px}.tags span{font-size:11px;border:1px solid #bdbdd0;padding:6px 10px;border-radius:30px}.view{border:0;border-bottom:1px solid var(--ink);background:none;padding:12px 0;display:flex;justify-content:space-between;width:210px;margin-top:50px;font-size:12px!important}.art{position:relative;display:block;width:100%;padding:0;border:0;background:var(--purple);line-height:0}.art img{display:block;width:100%;height:auto}.art-hint{position:absolute;bottom:16px;right:16px;line-height:1;background:var(--ink);color:white;padding:12px 16px;font-size:11px;opacity:0;transition:opacity .2s}.art:hover .art-hint,.art:focus-visible .art-hint{opacity:1}.mist-footer{padding:50px 5% 25px;background:var(--lime)}.mist-footer strong{font-size:clamp(40px,7vw,110px);line-height:.95;letter-spacing:-.06em}.mist-footer>div{margin-top:45px;padding-top:20px;border-top:1px solid;display:flex;justify-content:space-between;font:11px monospace}.lightbox{border:0;padding:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:#101125;color:white}.lightbox::backdrop{background:#101125e8}.lightbox-bar{height:64px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;border-bottom:1px solid #ffffff30;font-size:13px}.lightbox-bar button{border:1px solid #ffffff50;background:none;color:white;padding:8px 12px;margin-left:8px}.image-scroll{height:calc(100% - 64px);overflow:auto;text-align:center;padding:20px;overscroll-behavior:contain}.image-scroll img{max-width:100%;height:auto;max-height:100%;object-fit:contain;vertical-align:top}.image-scroll.zoomed img{max-width:none;max-height:none;width:1086px}.mist-project:has(dialog[open]){overflow:hidden}@media(min-width:1800px){.intro,.mist-nav,.mist-footer{padding-left:calc((100vw - 1620px)/2);padding-right:calc((100vw - 1620px)/2)}}@media(max-width:700px){html{scroll-padding-top:105px}.mist-nav{height:auto;min-height:88px;padding:14px 5%;align-items:start;gap:12px;flex-direction:column}.brand{font-size:19px}.brand span{font-size:9px}.mist-nav>div{gap:26px;font-size:12px}.mist-nav>div a{padding:2px 0}.intro{padding:38px 5% 30px}.eyebrow{font-size:8px;letter-spacing:.7px}.intro h1{font-size:19vw;margin:22px 0}.intro h1 span{font-size:25px;margin-top:18px}.intro-bottom{margin-top:24px;align-items:center}.intro-bottom p{font-size:12px}.explore{font-size:0;gap:0}.explore span{font-size:32px}.chapter{grid-template-columns:1fr;gap:26px;padding:38px 5%}.chapter-copy{position:static;padding:0}.chapter h2{font-size:30px;margin:16px 0 12px}.chapter h2 br{display:none}.chapter p{max-width:100%;font-size:13px;margin:0}.tags{margin-top:16px}.view{margin-top:18px;width:100%;padding:10px 0}.art-hint{opacity:1;bottom:10px;right:10px;font-size:10px;padding:9px 12px}.mist-footer{padding-top:35px}.mist-footer strong{font-size:12vw}.lightbox-bar{padding:0 12px;font-size:11px}.lightbox-bar button{font-size:11px;padding:8px}.image-scroll{padding:10px;display:flex;align-items:center}.image-scroll.zoomed{display:block}.image-scroll img{flex-shrink:0;width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Portfolio integration: retain the original lime / mist-purple art direction. */
.mist-project{min-height:100svh;overflow-x:clip}
.mist-project .eyebrow,.mist-project .chapter-number,.mist-project .tags span{font-size:12px}
.mist-project .chapter p,.mist-project .intro-bottom p{font-size:16px}
.mist-project .mist-nav>div,.mist-project .view,.mist-project .art-hint{font-size:14px!important}
.mist-project .mist-nav>div a{min-height:44px;display:inline-flex;align-items:center}
.mist-project .chapter-copy,.mist-project .art{animation:mistEnter .9s cubic-bezier(.16,1,.3,1) both}
@keyframes mistEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:900px) and (min-width:701px){.mist-project .mist-nav{height:auto;min-height:88px;flex-wrap:wrap;gap:8px;padding:14px 5%}.mist-project .mist-nav>div{gap:20px}.mist-project .chapter{grid-template-columns:minmax(210px,1fr) minmax(0,1.7fr);gap:28px}.mist-project .brand span{display:none}}
@media(max-width:700px){
  html{scroll-padding-top:142px}
  .mist-project .mist-nav{gap:8px;padding:12px 5%}
  .mist-project .mist-nav>div{width:100%;gap:8px 18px;flex-wrap:wrap}
  .mist-project .mist-nav>div a{min-height:36px}
  .mist-project .brand span{font-size:10px}
  .mist-project .eyebrow{font-size:12px;line-height:1.7;letter-spacing:.5px}
  .mist-project .intro-bottom p{font-size:16px}
  .mist-project .chapter p{font-size:16px}
  .mist-project .tags span{font-size:12px}
  .mist-project .lightbox-bar{height:auto;min-height:88px;flex-wrap:wrap;gap:10px;padding:12px;font-size:14px}
  .mist-project .lightbox-bar>div{display:flex;gap:8px}
  .mist-project .lightbox-bar button{font-size:14px;min-height:44px;margin:0}
  .mist-project .image-scroll{height:calc(100% - 100px);align-items:flex-start;padding:12px}
  .mist-project .image-scroll img{height:auto;max-height:none;object-fit:contain}
  .mist-project .image-scroll.zoomed img{width:1086px}
  .mist-project .mist-footer>div{font-size:12px;gap:20px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.mist-project .chapter-copy,.mist-project .art{animation:none}}