html { scroll-behavior: auto; }
html:has(#mmy-site) { scrollbar-gutter:stable; }
body { margin: 0; background: #f4f4ef; }
#mmy-site { --header-h:88px; --text-base:18px; --text-small:14px; --ink:#171914; --paper:#f4f4ef; --muted:#55594f; --line:#17191424; --accent:#e1e3d8; --surface:#e7e8e1; --lilac:#e4dced; --sage:#d8e5cb; --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1); color:var(--ink); background:var(--paper); font:var(--text-base)/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-optical-sizing:auto; text-rendering:optimizeLegibility; overflow:clip; min-height:100svh; text-align:left; -webkit-font-smoothing:antialiased; isolation:isolate; }
#mmy-site *,#mmy-site *::before,#mmy-site *::after { box-sizing:border-box; }
#mmy-site h1,#mmy-site h2,#mmy-site h3,#mmy-site p,#mmy-site figure { margin:0; }
#mmy-site a { color:inherit; text-decoration:none; }
#mmy-site button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
#mmy-site button,#mmy-site .mmy-button { font-size:17px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#mmy-site a:focus-visible,#mmy-site button:focus-visible { outline:3px solid #697d19; outline-offset:6px; }
#mmy-site [hidden] { display:none!important; }
#mmy-site img { display:block; max-width:100%; height:auto; }
#mmy-site .mmy-skip { position:fixed; top:8px; left:12px; z-index:10010; padding:12px 18px; background:var(--accent); transform:translateY(-160%); }
#mmy-site .mmy-skip:focus { transform:translateY(0); }
#mmy-site .mmy-header { height:var(--header-h); position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; background:var(--paper); border-bottom:1px solid var(--line); }
#mmy-site .mmy-wordmark { display:flex; gap:13px; align-items:center; }
#mmy-site .mmy-monogram { width:60px; height:60px; object-fit:contain; mix-blend-mode:multiply; }
#mmy-site .mmy-wordmark-text { font-size:14px; font-weight:700; line-height:1.15; letter-spacing:.03em; }
#mmy-site .mmy-nav { display:flex; gap:32px; align-items:center; margin-left:auto; margin-right:5vw; font-size:16px; }
#mmy-site .mmy-nav a { position:relative; padding:9px 0; }
#mmy-site .mmy-nav a::after { content:""; position:absolute; height:1px; left:0; right:0; bottom:3px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform 200ms var(--ease-out); }
#mmy-site .mmy-nav a[aria-current=page]::after { transform:scaleX(1); }
#mmy-site .mmy-language { display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:50px; padding:3px; }
#mmy-site .mmy-language button { min-width:39px; min-height:40px; padding:7px 12px; font-size:14px; border-radius:30px; }
#mmy-site .mmy-language button[aria-pressed=true] { background:var(--ink); color:var(--paper); }
#mmy-site .mmy-view { padding-top:var(--header-h); background:var(--paper); min-height:100svh; }
#mmy-site .mmy-view:focus { outline:none; }
#mmy-site .mmy-incoming { position:fixed; inset:0; right:auto; z-index:30; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
#mmy-site .mmy-incoming::-webkit-scrollbar { display:none; }
#mmy-site .mmy-wrap { padding-left:6vw; padding-right:6vw; }
#mmy-site .mmy-eyebrow { font-size:14px; letter-spacing:.055em; text-transform:uppercase; font-weight:600; }
#mmy-site .mmy-eyebrow .mmy-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:8px; }
#mmy-site .mmy-hero { min-height:calc(100svh - var(--header-h)); position:relative; display:grid; grid-template-columns:1.28fr 1fr; gap:4vw; align-items:center; padding-top:46px; padding-bottom:90px; }
#mmy-site .mmy-hero-copy { align-self:center; }
#mmy-site .mmy-hero h1 { font-size:clamp(94px,13.8vw,224px); line-height:.83; letter-spacing:-.065em; font-weight:700; margin:37px 0 32px -9px; }
#mmy-site .mmy-hero h1 span { display:block; }
#mmy-site .mmy-hero h1 span+span { padding-left:11vw; }
#mmy-site .mmy-hero-line { max-width:370px; font-size:clamp(19px,2.1vw,29px); line-height:1.2; letter-spacing:-.03em; }
#mmy-site .mmy-hero-actions { display:flex; align-items:center; gap:24px; margin-top:30px; flex-wrap:wrap; }
#mmy-site .mmy-button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:15px 23px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:40px; font-size:17px; min-height:49px; transition:transform 160ms var(--ease-out),background-color 180ms ease,color 180ms ease; }
#mmy-site .mmy-button.mmy-outline { background:transparent; color:var(--ink); }
#mmy-site .mmy-button:active { transform:scale(.97); }
#mmy-site .mmy-text-link { font-size:16px; display:inline-flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid currentColor; }
#mmy-site .mmy-badge-stage { position:relative; padding:35px 20px; aspect-ratio:1; max-width:480px; justify-self:center; width:100%; }
#mmy-site .mmy-badge-art { width:100%; aspect-ratio:1; object-fit:contain; mix-blend-mode:multiply; transform:none; }
#mmy-site .mmy-badge-stage .mmy-badge-art { position:absolute; inset:5% 4% 13%; width:92%; height:82%; aspect-ratio:auto; }
#mmy-site .mmy-badge-caption { position:absolute; bottom:0; left:0; font-size:14px; line-height:1.5; letter-spacing:.08em; }
#mmy-site .mmy-hero-foot { position:absolute; bottom:25px; left:6vw; right:6vw; display:flex; justify-content:space-between; align-items:center; font-size:14px; line-height:1.5; text-transform:uppercase; letter-spacing:.06em; }
#mmy-site .mmy-hero-foot a { display:flex; gap:20px; padding:10px 0; }
#mmy-site .mmy-work { color:var(--ink); background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-top:85px; padding-bottom:100px; }
#mmy-site .mmy-section-top { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; }
#mmy-site .mmy-section-title { font-size:clamp(40px,6vw,92px); font-weight:500; letter-spacing:-.055em; line-height:.98; }
#mmy-site .mmy-section-title span { display:block; }
#mmy-site .mmy-work-note { font-size:18px; max-width:310px; padding-top:15px; color:var(--muted); }
#mmy-site .mmy-project-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:55px; }
#mmy-site .mmy-project-card:nth-child(2) { margin-top:95px; }
#mmy-site .mmy-project-art { position:relative; overflow:hidden; display:block; aspect-ratio:1.1; border-radius:3px; color:var(--ink); background:var(--lilac); }
#mmy-site .mmy-project-card.sage .mmy-project-art { background:var(--sage); }
#mmy-site .mmy-project-card,#mmy-site .mmy-project-view { --watermark:rgb(64 49 71 / 8%); }
#mmy-site .mmy-project-card.sage,#mmy-site .mmy-project-view.sage { --watermark:rgb(45 69 45 / 8%); }
#mmy-site .mmy-project-art::before { content:attr(data-word); position:absolute; top:14%; left:-2%; right:-2%; text-align:center; font-size:clamp(38px,6.1vw,98px); font-weight:700; letter-spacing:-.065em; color:var(--watermark); white-space:nowrap; pointer-events:none; }
#mmy-site .mmy-project-tag { position:absolute; top:24px; left:24px; font-size:14px; line-height:1.5; letter-spacing:.06em; }
#mmy-site .mmy-card-arrow { position:absolute; z-index:2; top:20px; right:20px; width:42px; height:42px; display:grid; place-items:center; border:1px solid #16191040; border-radius:50%; font-size:23px; transition:background-color 180ms ease,transform 200ms var(--ease-out); }
#mmy-site .mmy-phone { position:absolute; width:31%; aspect-ratio: .455; padding:5px; border:2px solid #282b26; border-radius:21px; overflow:hidden; background:#282b26; box-shadow:0 22px 35px #16191026; transition:transform 420ms var(--ease-out); }
#mmy-site .mmy-phone img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:15px; }
#mmy-site .mmy-phone.first { top:25%; left:20%; transform:rotate(-9deg); }
#mmy-site .mmy-phone.second { top:34%; right:15%; transform:rotate(9deg); }
#mmy-site .mmy-project-info { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-top:20px; }
#mmy-site .mmy-project-info h3 { font-size:30px; font-weight:500; line-height:1.2; letter-spacing:-.04em; }
#mmy-site .mmy-project-info p { font-size:18px; line-height:1.65; color:var(--muted); max-width:300px; margin-top:7px; }
#mmy-site .mmy-about-strip { display:grid; grid-template-columns:1fr 1.4fr; gap:10vw; padding-top:100px; padding-bottom:100px; border-bottom:1px solid var(--line); }
#mmy-site .mmy-about-strip p { font-size:clamp(25px,3.5vw,48px); line-height:1.2; letter-spacing:-.04em; margin-bottom:25px; }
#mmy-site .mmy-about-small { max-width:280px; margin-top:25px; font-size:18px; color:var(--muted); }
#mmy-site .mmy-contact-strip { padding-top:80px; padding-bottom:65px; }
#mmy-site .mmy-contact-row { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:30px 0; }
#mmy-site .mmy-contact-row h2 { font-size:clamp(62px,12vw,170px); line-height:1; font-weight:500; letter-spacing:-.07em; }
#mmy-site .mmy-contact-arrow { width:clamp(75px,11vw,150px); height:clamp(75px,11vw,150px); border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; font-size:clamp(35px,6vw,80px); transition:transform 250ms var(--ease-out),background-color 180ms ease; }
#mmy-site .mmy-contact-strip>p { font-size:18px; }
#mmy-site .mmy-footer { padding:25px 6vw; display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; border-top:1px solid var(--line); font-size:14px; line-height:1.6; }
#mmy-site .mmy-footer-links { display:flex; align-items:center; gap:22px; }
#mmy-site .mmy-footer button { font:inherit; padding:0; }
#mmy-site .mmy-project-view { background:var(--lilac); }
#mmy-site .mmy-project-view.sage { background:var(--sage); }
#mmy-site .mmy-detail-head { padding-top:45px; padding-bottom:60px; }
#mmy-site .mmy-back { display:inline-flex; gap:15px; font-size:16px; border-bottom:1px solid currentColor; padding:8px 0; }
#mmy-site .mmy-detail-title { font-size:clamp(70px,14vw,215px); font-weight:500; letter-spacing:-.07em; line-height:1.05; margin-top:45px; }
#mmy-site .mmy-detail-intro { display:grid; grid-template-columns:1fr 1fr; gap:6vw; margin:25px 0 45px; }
#mmy-site .mmy-detail-intro h2 { font-size:clamp(27px,3.2vw,48px); line-height:1.1; letter-spacing:-.04em; font-weight:500; }
#mmy-site .mmy-detail-intro p { font-size:19px; max-width:450px; }
#mmy-site .mmy-detail-actions { display:flex; gap:15px; flex-wrap:wrap; align-items:center; margin-top:25px; }
#mmy-site .mmy-detail-gallery { position:relative; isolation:isolate; overflow:hidden; background:#ffffff3d; border:1px solid var(--line); border-radius:4px; padding:55px 9% 30px; margin-top:45px; }
#mmy-site .mmy-software-watermark { position:absolute; z-index:0; top:12%; left:0; right:0; text-align:center; font-family:Arial,"Helvetica Neue",sans-serif; font-size:clamp(52px,14vw,220px); font-weight:700; letter-spacing:-.065em; line-height:1; color:var(--watermark); white-space:nowrap; pointer-events:none; user-select:none; }
#mmy-site [data-view=litetale] .mmy-software-watermark { top:10%; font-size:clamp(84px,24vw,360px); }
#mmy-site .mmy-detail-phones { position:relative; z-index:1; display:flex; gap:8%; justify-content:center; align-items:flex-start; max-height:750px; overflow:hidden; }
#mmy-site .mmy-detail-phone { width:34%; max-width:290px; border-radius:28px; padding:6px; background:#282b26; border:2px solid #282b26; box-shadow:0 20px 30px #16191018; overflow:hidden; }
#mmy-site .mmy-detail-phone:nth-child(2) { margin-top:55px; }
#mmy-site .mmy-detail-phone img { width:100%; border-radius:20px; }
#mmy-site .mmy-detail-gallery figcaption { position:relative; z-index:1; font-size:14px; line-height:1.5; margin-top:28px; opacity:.6; }
#mmy-site .mmy-features { padding-top:60px; padding-bottom:75px; }
#mmy-site .mmy-feature { padding:27px 0; display:grid; grid-template-columns:70px 1fr 1fr; gap:4vw; border-top:1px solid var(--line); }
#mmy-site .mmy-feature span { font-size:14px; line-height:1.5; padding-top:5px; }
#mmy-site .mmy-feature h3 { font-size:25px; letter-spacing:-.035em; line-height:1.2; font-weight:500; }
#mmy-site .mmy-feature p { font-size:18px; max-width:440px; }
#mmy-site .mmy-project-note { border-top:1px solid var(--line); padding-top:25px; font-size:16px; max-width:700px; }
#mmy-site .mmy-next-project { background:var(--paper); color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:25px; align-items:center; padding-top:65px; padding-bottom:65px; }
#mmy-site .mmy-next-project h2 { font-size:clamp(38px,7vw,100px); letter-spacing:-.055em; line-height:1.15; margin-top:12px; font-weight:500; }
#mmy-site .mmy-next-project .mmy-contact-arrow { border-color:var(--line); }
#mmy-site .mmy-about-page { padding-top:75px; padding-bottom:90px; }
#mmy-site .mmy-page-title { font-size:clamp(58px,9vw,140px); line-height:.98; letter-spacing:-.065em; font-weight:500; margin-top:30px; max-width:1100px; }
#mmy-site .mmy-page-title span { display:block; }
#mmy-site .mmy-bio-layout { margin-top:65px; display:grid; grid-template-columns:1fr 1.1fr; gap:10vw; align-items:center; }
#mmy-site .mmy-bio-layout .mmy-badge-art { max-width:330px; margin:auto; }
#mmy-site .mmy-bio-text { font-size:22px; line-height:1.45; letter-spacing:-.02em; }
#mmy-site .mmy-bio-text p+p { margin-top:24px; }
#mmy-site .mmy-facts { display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
#mmy-site .mmy-facts span { border:1px solid var(--line); padding:8px 12px; border-radius:30px; font-size:15px; }
#mmy-site .mmy-contact-page { min-height:calc(100svh - var(--header-h)); padding-top:70px; padding-bottom:60px; display:flex; flex-direction:column; }
#mmy-site .mmy-contact-page .mmy-page-title { margin-top:35px; }
#mmy-site .mmy-contact-meta { margin-top:45px; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
#mmy-site .mmy-contact-meta p { font-size:19px; max-width:400px; }
#mmy-site .mmy-email-line { display:flex; align-items:center; gap:25px; flex-wrap:wrap; margin-top:15px; }
#mmy-site .mmy-email { font-size:clamp(20px,3.2vw,48px); letter-spacing:-.04em; border-bottom:1px solid currentColor; overflow-wrap:anywhere; }
#mmy-site .mmy-copy { min-height:42px; min-width:66px; border:1px solid var(--line); border-radius:30px; padding:8px 14px; font-size:15px; }
#mmy-site .mmy-contact-bottom { margin-top:auto; padding-top:80px; display:flex; justify-content:space-between; align-items:flex-end; }
#mmy-site .mmy-contact-bottom .mmy-monogram { width:75px; height:75px; }
#mmy-site .mmy-status { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); z-index:80; background:var(--ink); color:var(--paper); border-radius:30px; padding:12px 22px; font-size:16px; pointer-events:none; opacity:0; transition:opacity 180ms ease; }
#mmy-site .mmy-status[data-visible=true] { opacity:1; }
#mmy-site .mmy-loader { position:fixed; z-index:10000; inset:0; background:var(--paper); color:var(--ink); display:grid; place-items:center; }
#mmy-site .mmy-loader-center { width:clamp(240px,30vw,420px); max-width:calc(100vw - 64px); aspect-ratio:1; display:grid; place-items:center; background:var(--paper); }
#mmy-site .mmy-loader-badge { width:100%; mix-blend-mode:multiply; image-rendering:auto; }
#mmy-site .mmy-loader-skip { position:absolute; bottom:max(28px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); font-size:16px; padding:10px 16px; text-decoration:underline; text-underline-offset:5px; }
#mmy-site .mmy-fallback { padding:150px 6vw; }
#mmy-site .mmy-reveal { opacity:1; }
#mmy-site .mmy-reveal[data-pending] { opacity:0; transform:translateY(16px); }
#mmy-site .mmy-reveal[data-seen] { transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out); }
#mmy-site[data-lang=zh] .mmy-section-title,#mmy-site[data-lang=zh] .mmy-page-title,#mmy-site[data-lang=zh] .mmy-contact-row h2 { letter-spacing:-.025em; line-height:1.12; }
@media (hover:hover) and (pointer:fine) {
#mmy-site .mmy-nav a:hover::after { transform:scaleX(1); }
#mmy-site .mmy-button:hover { background:var(--accent); color:var(--ink); }
#mmy-site .mmy-badge-stage:hover .mmy-badge-art { transform:none; }
#mmy-site .mmy-project-art:hover .mmy-card-arrow { background:var(--ink); color:var(--paper); transform:rotate(45deg); }
#mmy-site .mmy-project-art:hover .mmy-phone.first { transform:rotate(-5deg) translateY(-8px); }
#mmy-site .mmy-project-art:hover .mmy-phone.second { transform:rotate(5deg) translateY(-12px); }
#mmy-site .mmy-contact-row:hover .mmy-contact-arrow { transform:rotate(45deg); background:var(--accent); }
}
@media (min-width:1700px) { #mmy-site .mmy-wrap { padding-left:max(6vw,calc((100vw - 1550px)/2)); padding-right:max(6vw,calc((100vw - 1550px)/2)); } }
@media (max-width:800px) {
#mmy-site .mmy-header { height:80px; padding:0 5vw; }
#mmy-site .mmy-view { padding-top:80px; }
#mmy-site .mmy-nav { font-size:16px; gap:20px; margin-right:20px; }
#mmy-site .mmy-wordmark-text { font-size:14px; display:none; }
#mmy-site .mmy-hero { min-height:auto; padding-top:40px; padding-bottom:95px; gap:0; }
#mmy-site .mmy-hero h1 { font-size:16vw; margin-left:-4px; }
#mmy-site .mmy-hero h1 span+span { padding-left:6vw; }
#mmy-site .mmy-hero-line { font-size:20px; max-width:250px; }
#mmy-site .mmy-hero-actions { gap:15px; }
#mmy-site .mmy-badge-stage { padding:25px 5px; }
#mmy-site .mmy-work { padding-top:60px; padding-bottom:65px; }
#mmy-site .mmy-work-note { max-width:260px; font-size:18px; }
#mmy-site .mmy-project-grid { gap:18px; margin-top:35px; }
#mmy-site .mmy-project-card:nth-child(2) { margin-top:65px; }
#mmy-site .mmy-project-info h3 { font-size:24px; }
#mmy-site .mmy-project-art { aspect-ratio:.8; }
#mmy-site .mmy-project-tag { top:15px; left:15px; font-size:14px; }
#mmy-site .mmy-card-arrow { top:12px; right:12px; width:32px; height:32px; font-size:19px; }
#mmy-site .mmy-phone { width:42%; border-radius:17px; padding:3px; }
#mmy-site .mmy-phone.first { top:30%; left:8%; }
#mmy-site .mmy-phone.second { top:40%; right:6%; }
#mmy-site .mmy-phone img { border-radius:11px; }
#mmy-site .mmy-about-strip { gap:5vw; padding-top:65px; padding-bottom:65px; }
#mmy-site .mmy-feature { grid-template-columns:35px 1fr 1fr; gap:20px; }
#mmy-site .mmy-bio-layout { gap:7vw; }
#mmy-site .mmy-bio-text { font-size:18px; }
#mmy-site .mmy-contact-meta { grid-template-columns:1fr; }
}
@media (max-width:520px) {
#mmy-site .mmy-header { height:76px; }
#mmy-site .mmy-view { padding-top:76px; }
#mmy-site .mmy-monogram { width:36px; height:36px; }
#mmy-site .mmy-nav { gap:12px; margin-right:10px; font-size:15px; }
#mmy-site .mmy-language button { font-size:14px; padding:6px 8px; min-width:36px; min-height:40px; }
#mmy-site .mmy-language { padding:2px; }
#mmy-site .mmy-hero { display:flex; flex-direction:column; align-items:stretch; padding-top:30px; }
#mmy-site .mmy-eyebrow { font-size:14px; }
#mmy-site .mmy-hero h1 { font-size:26vw; margin-top:26px; margin-bottom:25px; }
#mmy-site .mmy-hero h1 span+span { padding-left:14vw; }
#mmy-site .mmy-hero-line { font-size:24px; max-width:280px; }
#mmy-site .mmy-hero-actions { margin-top:24px; }
#mmy-site .mmy-button { font-size:17px; padding:12px 18px; min-height:46px; gap:18px; }
#mmy-site .mmy-text-link { font-size:16px; }
#mmy-site .mmy-badge-stage { margin:36px auto 0; width:72%; padding:20px 12px; }
#mmy-site .mmy-orbit-caption,#mmy-site .mmy-badge-caption { font-size:14px; }
#mmy-site .mmy-hero-foot { bottom:22px; font-size:14px; }
#mmy-site .mmy-section-top { flex-direction:column; gap:18px; }
#mmy-site .mmy-section-title { font-size:44px; }
#mmy-site .mmy-work-note { font-size:18px; max-width:270px; padding:0; }
#mmy-site .mmy-project-grid { grid-template-columns:1fr; gap:42px; }
#mmy-site .mmy-project-card:nth-child(2) { margin-top:0; }
#mmy-site .mmy-project-art { aspect-ratio:1.05; }
#mmy-site .mmy-project-art::before { font-size:13vw; }
#mmy-site .mmy-phone { width:32%; }
#mmy-site .mmy-phone.first { top:24%; left:20%; }
#mmy-site .mmy-phone.second { top:32%; right:15%; }
#mmy-site .mmy-project-info h3 { font-size:30px; }
#mmy-site .mmy-about-strip { grid-template-columns:1fr; gap:30px; }
#mmy-site .mmy-about-small { font-size:18px; max-width:none; margin-top:12px; }
#mmy-site .mmy-about-strip p { font-size:31px; }
#mmy-site .mmy-contact-strip { padding-top:50px; padding-bottom:45px; }
#mmy-site .mmy-contact-row h2 { font-size:18vw; }
#mmy-site .mmy-contact-arrow { width:65px; height:65px; min-width:65px; font-size:35px; }
#mmy-site .mmy-footer { font-size:14px; gap:15px; }
#mmy-site .mmy-footer-links { gap:16px; }
#mmy-site .mmy-detail-head { padding-top:25px; padding-bottom:35px; }
#mmy-site .mmy-detail-title { font-size:17vw; margin-top:30px; }
#mmy-site .mmy-detail-intro { grid-template-columns:1fr; gap:20px; }
#mmy-site .mmy-detail-intro h2 { font-size:32px; }
#mmy-site .mmy-detail-intro p { font-size:19px; }
#mmy-site .mmy-detail-gallery { padding:25px 5% 20px; margin-top:30px; }
#mmy-site .mmy-detail-phone { width:43%; padding:3px; border-radius:17px; }
#mmy-site .mmy-detail-phone img { border-radius:11px; }
#mmy-site .mmy-detail-phone:nth-child(2) { margin-top:35px; }
#mmy-site .mmy-detail-gallery figcaption { font-size:14px; }
#mmy-site .mmy-features { padding-top:20px; padding-bottom:40px; }
#mmy-site .mmy-feature { grid-template-columns:25px 1fr; gap:12px; padding:23px 0; }
#mmy-site .mmy-feature h3 { font-size:24px; }
#mmy-site .mmy-feature p { grid-column:2; font-size:18px; }
#mmy-site .mmy-next-project { padding-top:40px; padding-bottom:40px; }
#mmy-site .mmy-about-page { padding-top:45px; padding-bottom:50px; }
#mmy-site .mmy-page-title { font-size:15vw; }
#mmy-site .mmy-bio-layout { grid-template-columns:1fr; gap:40px; margin-top:40px; }
#mmy-site .mmy-bio-layout .mmy-badge-art { max-width:230px; }
#mmy-site .mmy-contact-page { padding-top:45px; min-height:calc(100svh - 76px); }
#mmy-site .mmy-contact-page .mmy-page-title { font-size:15vw; }
#mmy-site .mmy-contact-meta { gap:30px; margin-top:35px; }
#mmy-site .mmy-contact-meta p { font-size:19px; }
#mmy-site .mmy-email { font-size:26px; }
#mmy-site .mmy-email-line { gap:15px; }
#mmy-site .mmy-contact-bottom { padding-top:45px; }
}
@media (prefers-reduced-motion:reduce) {
#mmy-site *,#mmy-site *::before,#mmy-site *::after { animation:none!important; transition-duration:160ms!important; }
#mmy-site .mmy-badge-art { transform:none!important; }
#mmy-site .mmy-reveal[data-pending] { opacity:1; transform:none; }
}
/* Typography follows optical-size hierarchy, comfortable leading, and platform fonts. */
#mmy-site h1,#mmy-site h2,#mmy-site h3 { font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; }
#mmy-site .mmy-nav { font-weight:500; }
#mmy-site .mmy-hero-foot { gap:24px; }
#mmy-site .mmy-hero-foot > * { max-width:47%; }
#mmy-site .mmy-footer { align-items:center; }
#mmy-site .mmy-project-tag { font-weight:500; }
#mmy-site .mmy-button,#mmy-site .mmy-text-link { font-weight:500; }
#mmy-site[data-lang=zh] p,#mmy-site[data-lang=zh] .mmy-bio-text { line-height:1.75; letter-spacing:0; }
@media(max-width:800px) { #mmy-site { --header-h:80px; } }
@media(max-width:520px) {
#mmy-site { --header-h:116px; --text-base:17px; }
#mmy-site .mmy-header { height:var(--header-h); display:grid; grid-template-columns:1fr auto; grid-template-rows:52px 48px; padding-top:8px; padding-bottom:8px; }
#mmy-site .mmy-view { padding-top:var(--header-h); }
#mmy-site .mmy-wordmark { grid-column:1; grid-row:1; }
#mmy-site .mmy-wordmark-text { display:block; }
#mmy-site .mmy-language { grid-column:2; grid-row:1; }
#mmy-site .mmy-nav { grid-column:1 / -1; grid-row:2; width:100%; justify-content:space-between; font-size:16px; gap:12px; margin:0; }
#mmy-site .mmy-contact-page { min-height:calc(100svh - var(--header-h)); }
#mmy-site .mmy-language button { font-size:14px; }
#mmy-site .mmy-hero-actions { gap:20px; align-items:flex-start; }
#mmy-site .mmy-button { font-size:16px; min-height:50px; }
#mmy-site .mmy-text-link { font-size:16px; }
#mmy-site .mmy-project-info p { font-size:17px; }
#mmy-site .mmy-detail-intro p,#mmy-site .mmy-feature p,#mmy-site .mmy-contact-meta p { font-size:17px; }
#mmy-site .mmy-footer-links { gap:18px; flex-wrap:wrap; }
#mmy-site .mmy-orbit-caption,#mmy-site .mmy-badge-caption { font-size:14px; }
#mmy-site .mmy-project-tag { font-size:14px; }
}
/* Main destinations occupy one viewport. Only software details are documents. */
html:has(#mmy-site[data-page-mode=screen]),
body:has(#mmy-site[data-page-mode=screen]) { height:100%; overflow:hidden; overscroll-behavior:none; }
#mmy-site[data-page-mode=screen] { height:100dvh; min-height:0; }
#mmy-site .mmy-screen { height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:clip; }
#mmy-site .mmy-screen > section { flex:1; min-height:0; }
#mmy-site .mmy-incoming { pointer-events:none; }
#mmy-site .mmy-footer-compact { flex:0 0 auto; min-height:48px; padding:10px 6vw; gap:12px; }
#mmy-site .mmy-footer-compact .mmy-footer-links { gap:18px; }
#mmy-site .mmy-screen .mmy-hero { padding-top:clamp(16px,3dvh,40px); padding-bottom:clamp(20px,4dvh,50px); }
#mmy-site .mmy-screen .mmy-hero h1 { font-size:clamp(78px,min(13.8vw,19dvh),224px); margin-top:clamp(18px,3dvh,32px); margin-bottom:clamp(18px,3dvh,32px); }
#mmy-site .mmy-screen .mmy-hero-line { line-height:1.3; }
#mmy-site .mmy-screen .mmy-badge-stage { max-width:min(480px,56dvh); }
#mmy-site .mmy-screen .mmy-work { display:flex; flex-direction:column; border:0; padding-top:clamp(18px,4dvh,44px); padding-bottom:clamp(18px,4dvh,44px); }
#mmy-site .mmy-screen .mmy-section-title { font-size:clamp(34px,min(6vw,8dvh),92px); margin-top:14px; }
#mmy-site .mmy-screen .mmy-project-grid { flex:1; min-height:0; grid-template-rows:minmax(0,1fr); margin-top:clamp(18px,3dvh,36px); }
#mmy-site .mmy-screen .mmy-project-card { display:flex; flex-direction:column; min-height:0; }
#mmy-site .mmy-screen .mmy-project-card:nth-child(2) { margin-top:clamp(20px,4dvh,50px); }
#mmy-site .mmy-screen .mmy-project-art { flex:1; min-height:0; aspect-ratio:auto; }
#mmy-site .mmy-screen .mmy-project-info { flex:0 0 auto; padding-top:14px; }
#mmy-site .mmy-screen .mmy-about-page { padding-top:clamp(22px,4dvh,52px); padding-bottom:clamp(22px,4dvh,52px); }
#mmy-site .mmy-screen .mmy-page-title { font-size:clamp(38px,min(9vw,11dvh),130px); margin-top:18px; }
#mmy-site .mmy-screen .mmy-bio-layout { margin-top:clamp(22px,4dvh,45px); gap:8vw; }
#mmy-site .mmy-screen .mmy-bio-layout .mmy-badge-art { max-width:min(300px,33dvh); }
#mmy-site .mmy-screen .mmy-bio-text { font-size:clamp(17px,2.3dvh,22px); line-height:1.5; }
#mmy-site .mmy-screen .mmy-bio-text p { line-height:inherit; }
#mmy-site .mmy-screen .mmy-bio-text p+p { margin-top:18px; }
#mmy-site .mmy-screen .mmy-facts { margin-top:20px; }
#mmy-site .mmy-screen .mmy-contact-page { display:flex; min-height:0; padding-top:clamp(20px,4dvh,50px); padding-bottom:clamp(20px,4dvh,50px); }
#mmy-site .mmy-screen .mmy-contact-page .mmy-page-title { font-size:clamp(38px,min(9vw,11dvh),130px); margin-top:20px; }
#mmy-site .mmy-screen .mmy-contact-meta { margin-top:clamp(22px,4dvh,42px); }
#mmy-site .mmy-screen .mmy-contact-bottom { padding-top:24px; }
@media(max-width:800px) {
#mmy-site .mmy-screen .mmy-hero { grid-template-columns:1.15fr 1fr; }
#mmy-site .mmy-screen .mmy-hero h1 { font-size:clamp(72px,min(14vw,18dvh),130px); }
#mmy-site .mmy-screen .mmy-project-info h3 { font-size:26px; }
#mmy-site .mmy-screen .mmy-project-info p { font-size:17px; }
}
@media(max-width:520px) {
#mmy-site .mmy-monogram { width:44px; height:44px; }
#mmy-site .mmy-footer-compact > span:first-child { display:none; }
#mmy-site .mmy-footer-compact .mmy-footer-links { width:100%; justify-content:space-between; }
#mmy-site .mmy-screen .mmy-hero { align-items:stretch; justify-content:center; padding-top:16px; padding-bottom:16px; }
#mmy-site .mmy-screen .mmy-hero h1 { font-size:clamp(62px,min(26vw,12dvh),104px); margin-top:18px; margin-bottom:16px; }
#mmy-site .mmy-screen .mmy-hero-line { font-size:22px; }
#mmy-site .mmy-screen .mmy-hero-actions { margin-top:16px; gap:16px; align-items:center; }
#mmy-site .mmy-screen .mmy-hero-actions .mmy-button { min-height:46px; padding:11px 18px; }
#mmy-site .mmy-screen .mmy-badge-stage { width:min(46vw,22dvh); max-width:none; margin:16px auto 0; padding:0; flex:0 0 auto; }
#mmy-site .mmy-screen .mmy-badge-caption { display:none; }
#mmy-site .mmy-screen .mmy-work { padding-top:20px; padding-bottom:20px; }
#mmy-site .mmy-screen .mmy-section-top { flex:0 0 auto; }
#mmy-site .mmy-screen .mmy-section-title { font-size:clamp(30px,min(10vw,6dvh),44px); margin-top:10px; }
#mmy-site .mmy-screen .mmy-work-note { display:none; }
#mmy-site .mmy-screen .mmy-project-grid { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:18px; margin-top:20px; }
#mmy-site .mmy-screen .mmy-project-card { display:grid; grid-template-columns:42% 1fr; gap:16px; align-items:center; }
#mmy-site .mmy-screen .mmy-project-card:nth-child(2) { margin-top:0; }
#mmy-site .mmy-screen .mmy-project-art { height:100%; }
#mmy-site .mmy-screen .mmy-project-tag { display:none; }
#mmy-site .mmy-screen .mmy-project-art::before { display:block; font-size:clamp(20px,6vw,30px); top:10%; }
#mmy-site .mmy-screen .mmy-project-info { padding-top:0; }
#mmy-site .mmy-screen .mmy-project-info h3 { font-size:24px; }
#mmy-site .mmy-screen .mmy-project-info p { font-size:16px; line-height:1.5; }
#mmy-site .mmy-screen .mmy-phone { width:45%; }
#mmy-site .mmy-screen .mmy-phone.first { left:8%; top:18%; }
#mmy-site .mmy-screen .mmy-phone.second { right:5%; top:35%; }
#mmy-site .mmy-screen .mmy-card-arrow { width:28px; height:28px; top:8px; right:8px; font-size:17px; }
#mmy-site .mmy-screen .mmy-about-page { padding-top:24px; padding-bottom:24px; }
#mmy-site .mmy-screen .mmy-page-title { font-size:clamp(34px,min(11.5vw,7dvh),48px); }
#mmy-site .mmy-screen .mmy-bio-layout { display:block; margin-top:24px; }
#mmy-site .mmy-screen .mmy-bio-layout > div:first-child { display:none; }
#mmy-site .mmy-screen .mmy-bio-text { font-size:18px; line-height:1.55; }
#mmy-site .mmy-screen .mmy-contact-page { padding-top:24px; padding-bottom:24px; }
#mmy-site .mmy-screen .mmy-contact-page .mmy-page-title { font-size:clamp(38px,min(15vw,8dvh),60px); }
#mmy-site .mmy-screen .mmy-contact-meta { gap:18px; margin-top:24px; }
#mmy-site .mmy-screen .mmy-email-line { gap:10px; margin-top:10px; }
#mmy-site .mmy-screen .mmy-email { font-size:clamp(20px,6vw,26px); }
#mmy-site .mmy-screen .mmy-contact-bottom { padding-top:18px; }
#mmy-site .mmy-screen .mmy-contact-bottom .mmy-monogram { width:52px; height:52px; }
}
@media(max-width:520px) and (max-height:700px) {
#mmy-site .mmy-screen .mmy-hero { padding-top:12px; padding-bottom:12px; }
#mmy-site .mmy-screen .mmy-hero h1 { margin-top:12px; margin-bottom:12px; }
#mmy-site .mmy-screen .mmy-hero-line { font-size:20px; }
#mmy-site .mmy-screen .mmy-hero-actions { margin-top:12px; }
#mmy-site .mmy-screen .mmy-badge-stage { margin-top:10px; }
#mmy-site .mmy-screen .mmy-work { padding-top:12px; padding-bottom:12px; }
#mmy-site .mmy-screen .mmy-project-grid { gap:14px; margin-top:16px; }
#mmy-site .mmy-screen .mmy-about-page,#mmy-site .mmy-screen .mmy-contact-page { padding-top:14px; padding-bottom:14px; }
#mmy-site .mmy-screen .mmy-bio-layout { margin-top:18px; }
#mmy-site .mmy-screen .mmy-bio-text { font-size:16px; line-height:1.5; }
#mmy-site .mmy-screen .mmy-bio-text p+p { margin-top:12px; }
#mmy-site .mmy-screen .mmy-facts { margin-top:14px; gap:6px; }
#mmy-site .mmy-screen .mmy-facts span { padding:5px 9px; font-size:14px; }
#mmy-site .mmy-screen .mmy-contact-meta { margin-top:16px; gap:12px; }
#mmy-site .mmy-screen .mmy-contact-meta p { font-size:16px; line-height:1.5; }
#mmy-site .mmy-screen .mmy-contact-page .mmy-page-title { margin-top:12px; }
#mmy-site .mmy-screen .mmy-contact-bottom { padding-top:14px; }
#mmy-site .mmy-screen .mmy-contact-bottom .mmy-eyebrow { display:none; }
}
@media(max-width:360px) {
#mmy-site .mmy-screen .mmy-hero-actions { flex-wrap:nowrap; gap:12px; }
#mmy-site .mmy-screen .mmy-hero-actions .mmy-button { padding-left:14px; padding-right:14px; white-space:nowrap; }
#mmy-site .mmy-screen .mmy-hero-actions .mmy-button span { display:none; }
#mmy-site .mmy-screen .mmy-hero-actions .mmy-text-link { gap:6px; white-space:nowrap; }
#mmy-site .mmy-screen .mmy-badge-stage { width:min(40vw,18dvh); }
}
@media(min-width:521px) and (max-height:700px) {
#mmy-site .mmy-screen .mmy-bio-layout { display:block; }
#mmy-site .mmy-screen .mmy-bio-layout > div:first-child { display:none; }
#mmy-site .mmy-screen .mmy-bio-text { display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; }
#mmy-site .mmy-screen .mmy-bio-text p+p { margin-top:0; }
#mmy-site .mmy-screen .mmy-facts { grid-column:1 / -1; margin-top:0; }
}
@media(min-width:521px) and (max-width:900px) and (max-height:700px) {
#mmy-site .mmy-screen .mmy-contact-bottom { display:none; }
}
@media(min-width:521px) and (max-height:520px) {
#mmy-site { --header-h:64px; }
#mmy-site .mmy-header { height:var(--header-h); }
#mmy-site .mmy-view { padding-top:var(--header-h); }
#mmy-site .mmy-header .mmy-monogram { width:44px; height:44px; }
#mmy-site .mmy-footer-compact { min-height:42px; padding-top:6px; padding-bottom:6px; }
#mmy-site .mmy-screen .mmy-eyebrow { line-height:1.4; }
#mmy-site .mmy-screen .mmy-hero { padding-top:8px; padding-bottom:8px; }
#mmy-site .mmy-screen .mmy-hero h1 { font-size:clamp(42px,14dvh,64px); margin-top:8px; margin-bottom:8px; }
#mmy-site .mmy-screen .mmy-hero-line { font-size:18px; line-height:1.2; }
#mmy-site .mmy-screen .mmy-hero-actions { margin-top:8px; gap:20px; }
#mmy-site .mmy-screen .mmy-hero-actions .mmy-button { min-height:38px; padding:8px 16px; font-size:16px; line-height:1.2; }
#mmy-site .mmy-screen .mmy-hero-actions .mmy-text-link { padding-top:7px; padding-bottom:7px; line-height:1.2; }
#mmy-site .mmy-screen .mmy-badge-stage { max-width:48dvh; padding:0; }
#mmy-site .mmy-screen .mmy-badge-caption { display:none; }
#mmy-site .mmy-screen .mmy-work { padding-top:12px; padding-bottom:12px; }
#mmy-site .mmy-screen .mmy-section-top { flex-direction:row; gap:30px; }
#mmy-site .mmy-screen .mmy-section-title { font-size:30px; margin-top:8px; }
#mmy-site .mmy-screen .mmy-work-note { font-size:16px; line-height:1.4; padding-top:0; }
#mmy-site .mmy-screen .mmy-project-grid { gap:24px; margin-top:12px; }
#mmy-site .mmy-screen .mmy-project-card { display:grid; grid-template-columns:40% 1fr; gap:14px; align-items:center; }
#mmy-site .mmy-screen .mmy-project-card:nth-child(2) { margin-top:0; }
#mmy-site .mmy-screen .mmy-project-art { height:100%; }
#mmy-site .mmy-screen .mmy-project-tag { display:none; }
#mmy-site .mmy-screen .mmy-project-art::before { display:block; font-size:clamp(18px,2.8vw,26px); top:10%; }
#mmy-site .mmy-screen .mmy-project-info { padding-top:0; }
#mmy-site .mmy-screen .mmy-project-info h3 { font-size:24px; }
#mmy-site .mmy-screen .mmy-project-info p { font-size:16px; line-height:1.4; }
#mmy-site .mmy-screen .mmy-about-page,#mmy-site .mmy-screen .mmy-contact-page { padding-top:12px; padding-bottom:12px; }
#mmy-site .mmy-screen .mmy-page-title,#mmy-site .mmy-screen .mmy-contact-page .mmy-page-title { font-size:28px; margin-top:10px; }
#mmy-site .mmy-screen .mmy-bio-layout { display:block; margin-top:14px; }
#mmy-site .mmy-screen .mmy-bio-layout > div:first-child { display:none; }
#mmy-site .mmy-screen .mmy-bio-text { display:grid; grid-template-columns:1fr 1fr; gap:12px 30px; font-size:16px; line-height:1.4; }
#mmy-site .mmy-screen .mmy-bio-text p+p { margin-top:0; }
#mmy-site .mmy-screen .mmy-facts { grid-column:1 / -1; margin-top:0; }
#mmy-site .mmy-screen .mmy-facts span { font-size:14px; padding:4px 10px; }
#mmy-site .mmy-screen .mmy-contact-meta { grid-template-columns:1fr 1fr; margin-top:16px; }
#mmy-site .mmy-screen .mmy-contact-meta p { font-size:16px; line-height:1.4; }
#mmy-site .mmy-screen .mmy-email-line { gap:12px; }
#mmy-site .mmy-screen .mmy-email { font-size:22px; }
#mmy-site .mmy-screen .mmy-contact-bottom { display:none; }
}