@import url('mini-program.css');
.mini-case{margin:0;background:#070e0b;color:#f5f6ea;font-family:'Microsoft YaHei',system-ui,sans-serif;overflow-x:clip}
.mini-case *{box-sizing:border-box}.mini-case a{color:inherit;text-decoration:none}.mini-case button{font:inherit;cursor:pointer}.mini-case button:focus-visible,.mini-case a:focus-visible{outline:2px solid #cee864;outline-offset:6px}
.mini-case-nav{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:20px 5%;font-size:12px;color:#e7eadbdd;background:linear-gradient(#041009a0,transparent)}
.mini-case-nav>span{letter-spacing:.09em;font-size:11px}.mini-case-nav>div{display:flex;gap:24px;align-items:center}.mini-case-nav button{color:inherit;background:#1420176b;border:1px solid #cadb923d;border-radius:30px;padding:10px 20px}
.mini-case-hero{position:relative;isolation:isolate;container-type:inline-size;height:100svh;min-height:700px;max-height:1200px;overflow:hidden;background:#0c190f}
.mini-case-world{position:absolute;inset:0;z-index:-2;background:url('assets/projects/mini-design/medicine-environment.webp') center/100% 100% no-repeat}
.mini-case--voice .mini-case-world{background-image:url('assets/projects/mini-design/voice-environment.webp')}
.mini-case-world:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0005,transparent 55%)}
.mini-case-copy{position:absolute;left:6.5%;top:18.5%;width:44%;z-index:3}
.mini-case-number{display:block;width:max-content;position:relative;font:900 italic 13cqw/.9 Arial,sans-serif;letter-spacing:-.6cqw;padding-right:1cqw;background:linear-gradient(#fff 25%,#e2f0bd 48%,#93ba69 70%,#234a25);background-clip:text;color:transparent;margin-bottom:.8cqw}
.mini-case-number:after{content:'';position:absolute;left:-6%;right:-25%;top:66%;height:17%;border:1px solid #dcf0808c;border-radius:50%;transform:rotate(-12deg);border-left-color:transparent;border-top-color:transparent}
.mini-case-copy h1{font:900 6.1cqw/1.12 MiniSerif,SimSun,serif;letter-spacing:-.2cqw;margin:0 0 .6cqw;white-space:nowrap;background:linear-gradient(#fff 40%,#f2f6c1 65%,#d1e367);background-clip:text;color:transparent;transform:skew(-5deg)}
.mini-case-copy h2{font:400 2.62cqw/1.35 'Microsoft YaHei',sans-serif;margin:.55cqw 0 .8cqw;letter-spacing:.06cqw;white-space:nowrap}
.mini-case-copy>p{font-size:1.63cqw;line-height:1.55;color:#c1c8bb;margin:0 0 1.25cqw}
.mini-case-chips{display:flex;gap:1cqw;margin:0 0 2.6cqw}.mini-case-chips>span{display:flex;align-items:center;gap:.6cqw;border:1px solid #d4e2916b;border-radius:3cqw;padding:.6cqw .8cqw;white-space:nowrap;background:#06130c54}
.mini-case-chips svg{width:1.65cqw;height:1.65cqw;color:#d8ec78;flex:none}.mini-case-chips b{font-size:1.08cqw;font-weight:450}
.mini-live-button{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;color:#142314;background:linear-gradient(110deg,#e0f681,#b4e88c);border:1px solid #f0ffc470;border-radius:40px;padding:17px 27px;min-width:280px;font:600 19px/1.2 Arial,sans-serif!important;box-shadow:0 5px 25px #0003;transition:background .3s,box-shadow .3s}
.mini-case-hero .mini-live-button{font-size:1.38cqw!important;padding:1.2cqw 1.9cqw;min-width:19.5cqw}.mini-live-button i{font-style:normal;font-size:1.4em;transition:transform .3s}.mini-live-button:hover i{transform:translateX(6px)}.mini-live-button:hover{background:linear-gradient(110deg,#ecffa4,#c6f7a1);box-shadow:0 5px 30px #b8e97414}
.mini-case-art{position:absolute;right:4.5%;bottom:8.5%;width:43%;height:81%;z-index:2;perspective:1200px}
.mini-case-art .mini-phone{padding:.4cqw;border-radius:3.6cqw;border-width:2px;box-shadow:4px 6px 0 #141b0fe8,12px 20px 32px #0008}
.mini-case-art .mini-phone>img{border-radius:3.1cqw}
.mini-case-art .mini-phone-front{height:100%;width:auto;aspect-ratio:390/800;left:3%;bottom:0;transform:rotate(-4deg);z-index:3}
.mini-case-art .mini-phone-back{width:46%;right:1%;bottom:.2%;transform:rotate(9deg)}
.mini-case--voice .mini-case-copy{top:17.5%;width:45%}.mini-case--voice .mini-case-copy h1{font-size:5.75cqw}.mini-case--voice .mini-case-copy h2{font-size:2.13cqw;letter-spacing:0}.mini-case--voice .mini-case-copy>p{font-size:1.47cqw}.mini-case--voice .mini-case-chips{gap:1.2cqw;margin-top:1.7cqw;margin-bottom:2.7cqw}.mini-case--voice .mini-case-chips>span{flex-direction:column;border:0;padding:0;gap:.45cqw;background:none}.mini-case--voice .mini-case-chips svg{width:4.2cqw;height:4.2cqw;border:1px solid #d9e9b180;border-radius:50%;padding:1cqw;color:#eff6d9}.mini-case--voice .mini-case-chips b{font-size:.98cqw}
.mini-case-section{padding:100px max(6.5vw,24px);position:relative;max-width:1800px;margin:auto}
.mini-case-section>header>small{font:12px/1.5 Arial,sans-serif;letter-spacing:.18em;color:#c5dc8a;display:block;margin-bottom:22px}
.mini-case-section h2{font:900 clamp(30px,3.5vw,57px)/1.35 MiniSerif,SimSun,serif;letter-spacing:-.02em;margin:0 0 24px}.mini-case-section>header>p{font-size:16px;line-height:1.8;color:#aab8aa;max-width:620px}
.mini-case-why{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;border-bottom:1px solid #bdcf8a26;align-items:center}.mini-case-why p{font-size:18px;line-height:1.9;color:#b6c1b4;margin:0 0 20px}
.mini-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5%;margin-top:55px}.mini-case--voice .mini-feature-grid{grid-template-columns:repeat(5,1fr);gap:3%}.mini-feature-grid article{position:relative;border-top:1px solid #bdd59540;padding-top:25px}.mini-feature-grid article small{font:12px Arial;color:#819275;display:block;margin-bottom:35px}.mini-feature-grid svg{width:36px;height:36px;color:#d4ea8d}.mini-feature-grid h3{font-size:21px;font-weight:550;margin:24px 0 14px}.mini-feature-grid p{font-size:14px;line-height:1.9;color:#afbbad;margin:0}
.mini-ui-showcase{max-width:none;background:radial-gradient(ellipse at 50% 20%,#27432c77,transparent 70%),#0b160e;padding-top:110px;padding-bottom:130px;container-type:inline-size}
.mini-ui-showcase>header{max-width:1580px;margin:0 auto 65px}
.mini-ui-grid{max-width:1460px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:70px 4%;align-items:start}
.mini-ui-item{margin:0;position:relative;min-width:0}.mini-ui-item .mini-phone{position:relative;width:100%;border-radius:32px;padding:5px;box-shadow:4px 7px 0 #131c12,12px 16px 26px #0006;transform:none}.mini-ui-item .mini-phone>img{border-radius:27px}.mini-ui-item figcaption{padding:24px 5px 0}.mini-ui-item small{font:11px/1.3 Arial,sans-serif;letter-spacing:.08em;color:#9baa8f}.mini-ui-item h3{font-size:16px;line-height:1.5;font-weight:400;margin:10px 0 0;color:#e2e9da}
.mini-ui-item--0{grid-column:span 2;grid-row:span 2;padding-right:8%}.mini-ui-item--0 .mini-phone{width:70%;margin:0 auto;transform:rotate(-4deg);border-radius:46px;padding:7px}.mini-ui-item--0 .mini-phone>img{border-radius:39px}.mini-ui-item--0 figcaption{margin-top:18px;text-align:center}.mini-ui-item--3{padding-top:20%}.mini-ui-item--4{padding-top:8%}.mini-ui-item--5{padding-top:30%}
.mini-case-flow ol{display:grid;grid-template-columns:repeat(4,1fr);padding:0;list-style:none;gap:4%;margin-top:55px}.mini-case-flow li{border-top:1px solid #cadd9440;padding-top:25px;display:flex;gap:15px;align-items:center}.mini-case-flow b{font:italic 32px Georgia,serif;color:#d2e783}.mini-case-flow span{font-size:15px;color:#c6d0be}
.mini-experience{display:flex;align-items:center;justify-content:space-between;gap:10%;padding-top:80px;padding-bottom:100px;border-top:1px solid #cadd9426}.mini-experience header{max-width:650px}.mini-live-actions{display:flex;flex-direction:column;align-items:flex-start;gap:23px;flex:none}.mini-live-actions>a{font-size:13px;color:#bdcbb0}.mini-live-button small{font:11px Arial;letter-spacing:.03em}
.mini-case-footer{display:flex;justify-content:space-between;gap:20px;padding:32px 6.5%;border-top:1px solid #cadd9426;font-size:12px;color:#83947d}.mini-case-footer span{letter-spacing:.12em}
.mini-case-art .mini-phone>img{object-fit:fill}
.mini-case-number{line-height:.78}
.mini-case-copy h1{padding-right:.6cqw}
.mini-case-copy{animation:mini-case-enter .65s cubic-bezier(.2,.7,.2,1) both}.mini-case-art{animation:mini-case-enter .75s cubic-bezier(.2,.7,.2,1) .06s both}
@keyframes mini-case-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.mini-ui-details{max-width:1460px;margin:110px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:6%}
.mini-ui-details figure{margin:0;min-width:0}.mini-ui-crop{aspect-ratio:1.9;border-radius:14px;overflow:hidden;border:1px solid #d7e5bf36;box-shadow:0 12px 30px #0005}.mini-ui-crop img{width:100%;height:100%;object-fit:cover;display:block}.mini-ui-details h3{font-size:20px;font-weight:500;margin:25px 0 12px}.mini-ui-details p{font-size:14px;line-height:1.8;color:#adbaa6;margin:0}
@media(max-width:700px){.mini-ui-details{grid-template-columns:1fr;gap:35px;margin-top:60px}.mini-ui-details h3{font-size:18px}.mini-ui-details p{font-size:13px}}
@media(max-width:999px){.mini-overview .neon-nav-item small{display:block}.mini-case-art .mini-phone-front{height:auto;aspect-ratio:390/850;width:57%}.mini-case-number{line-height:.9}}
.mini-live-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#080e0b;color:#eef2e3;overflow:hidden}.mini-live-dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}.mini-live-dialog[open]{display:flex;flex-direction:column}.mini-live-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid #cadd9433;height:66px;flex:none}.mini-live-dialog header strong{font-size:14px;font-weight:550}.mini-live-dialog header>div{display:flex;align-items:center;gap:18px;font-size:12px}.mini-live-dialog header button{border:1px solid #cadd9459;background:#1b2919;color:#e9f1df;border-radius:30px;padding:9px 16px}.mini-live-dialog iframe{width:100%;height:100%;flex:1;border:0;background:#f7f6ef;min-height:0}.mini-live-dialog.is-loading iframe{opacity:.01}.mini-live-dialog iframe{transition:opacity .25s}.mini-case.has-live{overflow:hidden}
[data-reveal]{opacity:1;transform:none}.mini-case.has-reveal [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}.mini-case.has-reveal [data-reveal].is-revealed{opacity:1;transform:none}
@media(min-aspect-ratio:2/1){.mini-case-hero{height:56.25vw}}
@media(max-width:999px){.mini-case-hero{height:940px;min-height:0}.mini-case-nav{padding:15px 6%;font-size:11px}.mini-case-nav>span{display:none}.mini-case-nav>div{gap:16px}.mini-case-nav button{font-size:11px;padding:8px 13px}.mini-case-copy,.mini-case--voice .mini-case-copy{left:7%;top:100px;width:87%}.mini-case-number{font-size:110px;letter-spacing:-6px;margin-bottom:10px}.mini-case-copy h1,.mini-case--voice .mini-case-copy h1{font-size:52px;letter-spacing:-2px}.mini-case-copy h2,.mini-case--voice .mini-case-copy h2{font-size:22px;white-space:normal;margin:14px 0}.mini-case-copy>p,.mini-case--voice .mini-case-copy>p{font-size:15px;margin-bottom:20px}.mini-case-chips,.mini-case--voice .mini-case-chips{gap:7px;margin:22px 0}.mini-case-chips>span{padding:6px 10px;border-radius:25px;gap:6px}.mini-case-chips svg{width:17px;height:17px}.mini-case-chips b{font-size:11px}.mini-case--voice .mini-case-chips>span{gap:6px}.mini-case--voice .mini-case-chips svg{width:42px;height:42px;padding:10px}.mini-case--voice .mini-case-chips b{font-size:10px}.mini-case-hero .mini-live-button{font-size:15px!important;padding:13px 21px;min-width:220px}.mini-case-art{width:52%;right:10%;height:450px;bottom:36px}.mini-case-art .mini-phone{border-radius:28px;padding:4px}.mini-case-art .mini-phone>img{border-radius:23px}.mini-case-world{background-size:auto 100%;background-position:65% center}.mini-case-world:after{background:linear-gradient(#0014098a,transparent 75%)}.mini-case-section{padding:65px 7%}.mini-case-why{grid-template-columns:1fr;gap:25px}.mini-case-why p{font-size:16px}.mini-feature-grid,.mini-case--voice .mini-feature-grid{grid-template-columns:repeat(2,1fr);gap:40px 8%;margin-top:35px}.mini-feature-grid article small{margin-bottom:20px}.mini-ui-grid{grid-template-columns:repeat(2,1fr);gap:45px 8%}.mini-ui-item--0{grid-column:span 2;grid-row:auto;padding:0}.mini-ui-item--0 .mini-phone{width:60%;max-width:350px;border-radius:36px;padding:5px}.mini-ui-item--0 .mini-phone>img{border-radius:31px}.mini-ui-item .mini-phone{border-radius:23px;padding:4px}.mini-ui-item .mini-phone>img{border-radius:19px}.mini-ui-item--3,.mini-ui-item--4,.mini-ui-item--5{padding-top:0}.mini-ui-item h3{font-size:12px}.mini-ui-item small{font-size:10px}.mini-case-flow ol{grid-template-columns:repeat(2,1fr);gap:30px;margin-top:35px}.mini-case-flow span{font-size:12px}.mini-experience{display:block}.mini-live-actions{margin-top:35px}.mini-live-button{font-size:16px!important;min-width:270px}.mini-case-footer{font-size:10px;flex-wrap:wrap}.mini-live-dialog header{padding:12px;height:62px;gap:10px}.mini-live-dialog header strong{font-size:12px}.mini-live-dialog header>div{gap:10px;font-size:10px}.mini-live-dialog header button{padding:9px 12px;font-size:10px}}
@media(max-width:600px){.mini-case-art{width:83%;right:8%;bottom:35px;height:350px}.mini-case--voice .mini-case-copy h1{font-size:45px}.mini-case-copy h2,.mini-case--voice .mini-case-copy h2{font-size:19px}.mini-case-copy h1{font-size:49px}.mini-case-copy{top:85px!important}.mini-case-hero{height:950px}.mini-case--voice .mini-case-hero{height:980px}.mini-case-chips>span{padding:6px 7px}.mini-case-chips b{font-size:10px}.mini-case-art .mini-phone-front{width:57%}.mini-ui-item--0 .mini-phone{width:78%}.mini-case-section h2{font-size:31px}.mini-case-footer span{display:none}.mini-live-dialog header a{display:none}}
@media(prefers-reduced-motion:reduce){.mini-case *{animation:none!important;transition:none!important}.mini-case.has-reveal [data-reveal]{opacity:1;transform:none}}

@media(max-width:600px){.mini-live-dialog{width:100%;height:100dvh;overflow:hidden}.mini-live-dialog header{height:54px;padding:5px 12px;min-width:0}.mini-live-dialog header strong{font-size:12px;min-width:0}.mini-live-dialog header button{min-height:44px;font-size:12px;padding:8px 14px}.mini-live-dialog iframe{display:block;width:100%;min-width:0;flex:1 1 0;min-height:0}.mini-live-dialog header>div{flex:none}}