/* The case inherits Ning's shared typography, navigation and reading themes. */
.yl-case{--yl-line:var(--nz-line);--case-gold:var(--nz-gold)}
.yl-case [hidden]{display:none!important}
.yl-case .case-intro h1{font-size:clamp(60px,8.7vw,132px);letter-spacing:-.055em}
.yl-case .case-intro-bottom p{max-width:640px}
.yl-case h2,.yl-case h3,.yl-case .case-intro-bottom p{text-wrap:balance}
.yl-case .case-snapshot{margin-bottom:38px}
.yl-hero{margin:0}
.yl-hero>img{width:100%;height:auto;display:block;background:#ede9df}
.yl-hero figcaption{padding-top:16px}
.yl-live{scroll-margin-top:28px}
.yl-live-screen{position:relative;aspect-ratio:1316/862;background:#f8f5ef;overflow:hidden}
.yl-live-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.yl-live-ready .yl-live-poster{opacity:0}
.yl-live-frame{position:absolute;inset:0;width:1316px;height:862px;border:0;transform-origin:0 0;pointer-events:none}
.yl-live-active .yl-live-frame{pointer-events:auto}
.yl-live-active .yl-live-screen{outline:1px solid var(--case-gold);outline-offset:5px}
.yl-live-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 6px}
.yl-live-label{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px;color:var(--case-gold)}
.yl-live-label i{width:6px;height:6px;border-radius:50%;background:currentColor}
.yl-live-controls{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.yl-live-controls button,.yl-live-controls a{color:var(--case-muted);font-size:12px;min-height:44px;background:none;border:0;border-bottom:1px solid var(--yl-line);padding:8px 0;cursor:pointer;display:inline-flex;align-items:center}
.yl-live-controls button[data-live-enter]{color:var(--case-ink)}
.yl-live-controls button:hover,.yl-live-controls a:hover{color:var(--case-gold)}
.yl-live-controls button:disabled{opacity:.45;cursor:wait}
.yl-live .yl-live-hint{display:block;padding:6px 0 0;color:var(--case-muted);font-size:12px;line-height:1.7;min-height:32px}
@media(max-width:600px){.yl-live-toolbar{align-items:flex-start;flex-direction:column;gap:6px}.yl-live-controls{gap:18px}.yl-live-controls button,.yl-live-controls a{font-size:11px}.yl-live .yl-live-hint{font-size:11px}}
.yl-case .case-overview{padding:100px 0 120px}
.yl-case .case-description.yl-brief-key{color:var(--case-ink);padding-left:22px;border-left:2px solid var(--case-gold)}
.yl-section{padding:0 0 clamp(100px,11vw,160px);scroll-margin-top:40px}
.yl-section-head{display:grid;grid-template-columns:1.2fr 1fr;gap:9%;align-items:end;margin-bottom:48px}
.yl-section-head h2{font:normal clamp(32px,4vw,56px)/1.18 var(--nz-serif);letter-spacing:-.04em;margin:0;max-width:620px}
.yl-section-head>p{max-width:520px;color:var(--case-muted);font-size:var(--nz-body);line-height:1.85;margin:0}
.yl-case h3{font:normal clamp(25px,2.8vw,38px)/1.3 var(--nz-serif);letter-spacing:-.025em;margin:0 0 22px}
.yl-case button{font:inherit}
.yl-case button:focus-visible,.yl-case [role=tabpanel]:focus-visible{outline:2px solid var(--case-gold);outline-offset:6px}
.yl-compare{position:relative;aspect-ratio:1645/1078;background:#ede9df;isolation:isolate;overflow:hidden}
.yl-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none}
.yl-compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.yl-compare-label{position:absolute;top:22px;background:#101818e8;color:#f6f1e7;padding:9px 14px;font-size:12px;pointer-events:none;z-index:2}
.yl-before-label{left:22px}.yl-after-label{right:22px}
.yl-compare-line{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 3px #0006;pointer-events:none}
.yl-compare-line b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#101818;color:#fff;width:48px;height:48px;display:grid;place-items:center;border:1px solid #fff8;border-radius:50%;font-size:23px;font-weight:400}
.yl-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:ew-resize;opacity:0;z-index:3;touch-action:pan-y}
.yl-compare:focus-within{outline:2px solid var(--case-gold);outline-offset:6px}
.yl-compare-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:18px 0 48px}
.yl-compare-foot p{font-size:13px;color:var(--case-muted);margin:0}
.yl-compare-foot>div{display:flex;gap:20px;flex-shrink:0}
.yl-compare-foot button{background:none;border:0;border-bottom:1px solid var(--yl-line);color:var(--case-ink);min-height:44px;font-size:13px;cursor:pointer;padding:4px 0}
.yl-compare-foot button:hover{color:var(--case-gold)}
.yl-changes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.yl-changes>div{padding-top:24px}
.yl-changes p:not(.case-eyebrow){font-size:15px;color:var(--case-muted);line-height:1.85;margin:0}
.yl-role-list{list-style:none;padding:0;margin:0}
.yl-role-list li{display:grid;grid-template-columns:50px 1fr 1.65fr;gap:36px;padding:36px 0;}
.yl-role-list li>span{font:13px/2 monospace;color:var(--case-gold)}
.yl-role-list h3{font-size:28px;margin:0}
.yl-role-list p{margin:0;color:var(--case-muted);font-size:17px;line-height:1.9;max-width:660px}
.yl-credit{margin-top:28px;background:var(--nz-surface);padding:28px 34px;display:grid;grid-template-columns:1fr 2.3fr;gap:40px;border-left:2px solid var(--case-gold)}
.yl-credit p:not(.case-eyebrow){margin:0;color:var(--case-muted);font-size:14px;line-height:1.85}
.yl-detail{display:grid;grid-template-columns:1.18fr 1fr;gap:10%;align-items:center;margin-top:76px}
.yl-visual-language{padding:32px 0 0;scroll-margin-top:32px}
.yl-visual-language>h3{max-width:780px;margin-bottom:22px}
.yl-visual-intro{max-width:790px;font-size:17px;line-height:1.9;color:var(--case-muted);margin:0 0 36px}
.yl-visual-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 8%;margin:0}
.yl-visual-list>div{padding-top:22px;}
.yl-visual-list dt{font-size:19px;color:var(--case-ink);line-height:1.5;margin-bottom:12px}
.yl-visual-list dd{font-size:15px;line-height:1.9;color:var(--case-muted);margin:0;text-wrap:pretty}
@media(max-width:600px){.yl-visual-language{padding-top:24px}.yl-visual-intro{font-size:16px;margin-bottom:28px}.yl-visual-list{grid-template-columns:1fr;gap:24px}.yl-visual-list dt{font-size:18px}.yl-visual-list dd{font-size:15px}}
.yl-detail figure{margin:0;min-width:0}
.yl-detail-copy>p:not(.case-eyebrow){font-size:17px;line-height:1.85;color:var(--case-muted)}
.yl-detail-copy ul{padding:24px 0 0;list-style:none;margin:26px 0 0;}
.yl-detail-copy li{font-size:14px;color:var(--case-muted);padding-left:20px;position:relative;margin-bottom:12px}
.yl-detail-copy li:before{content:'+';position:absolute;left:0;color:var(--case-gold)}
.yl-detail-reverse{grid-template-columns:1fr 1.18fr}
.yl-detail-reverse figure{grid-column:2;grid-row:1}.yl-detail-reverse .yl-detail-copy{grid-column:1;grid-row:1}
.yl-crop{position:relative;overflow:hidden;background:#ede9df;aspect-ratio:1/1.03}
.yl-crop img{position:absolute;display:block;width:300%;height:100%;max-width:none;object-fit:cover}
.yl-paper-crop img{width:250%;height:auto;left:-101%;top:-54%}
.yl-water-crop img{width:290%;height:auto;left:-133%;top:-54%}
.yl-desk-crop{aspect-ratio:4/4.3}
.yl-desk-crop img{width:185%;height:auto;left:-3%;top:-2%}
@font-face{font-family:"Yulan Receipt Mono";src:url("assets/works/yulan/live/fonts/fragment-mono-latin-400-normal.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
.case-page .yl-ds-jump{margin:-14px 0 40px}
.case-page .yl-guidelines{margin-top:64px}
.yl-element-art{height:240px;position:relative;overflow:hidden;background:#f8f5ef;display:grid;place-items:center;color:#151412}
.yl-element-art .yl-crop{width:100%;height:100%;aspect-ratio:auto}
.yl-element-art .yl-paper-crop img{height:380px;width:auto;left:50%;top:50%;transform:translate(-61.3%,-66.5%)}
.yl-element-art .yl-water-crop img{height:820px;width:auto;left:50%;top:50%;transform:translate(-61.2%,-57.5%)}
.yl-element-art>img{width:90%;height:92%;object-fit:contain}
.yl-element-envelope>img{position:absolute;width:110%;height:auto;left:50%;top:50%;transform:translate(-50%,-31%)}
.yl-element-glass>img{width:80%;height:80%}
.yl-mini-backing,.yl-mini-receipt{position:absolute;width:110px;height:180px;background:#df622f;transform:translate(-18px,-2px) rotate(-12deg);box-shadow:0 8px 18px #29211c18}
.yl-mini-backing{background-image:radial-gradient(#542a191f .6px,transparent .8px);background-size:3px 3px}
.yl-mini-receipt{background:#faf9f5;transform:translate(17px,3px) rotate(8deg);border-bottom:2px dotted #7972694d}
.yl-mini-dot{position:absolute;width:19px;height:19px;border-radius:50%;background:#df622f}
.yl-mini-dot:nth-of-type(3){transform:translate(51px,-47px)}
.yl-mini-dot:nth-of-type(4){transform:translate(-19px,13px)}
.yl-mini-dot:nth-of-type(5){transform:translate(40px,64px)}
.yl-mini-meta{width:80%;max-width:250px;font-family:"Yulan Receipt Mono",monospace}
.yl-mini-meta>div{display:flex;align-items:center;gap:18px;font-size:28px;color:#797269}
.yl-mini-meta>div i{height:1px;background:#79726980;flex:1}
.yl-mini-meta>strong{display:block;font:900 33px/1.4 "PingFang SC","Microsoft YaHei",sans-serif;margin:15px 0 7px}
.yl-mini-meta>small{display:block;font-size:9px;letter-spacing:.07em}
.yl-mini-barcode{display:block;width:112px;height:27px;margin:18px 0 6px;background:repeating-linear-gradient(90deg,#22211f 0 1px,transparent 1px 3px,#22211f 3px 6px,transparent 6px 7px,#22211f 7px 9px,transparent 9px 12px,#22211f 12px 13px,transparent 13px 17px)}
.case-page .yl-type-title>span{font:900 clamp(50px,6vw,86px)/1.2 "PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:-.04em}
.case-page .yl-design-system .yl-type-meta strong,.case-page .yl-design-system .yl-type-meta p{font-family:"Yulan Receipt Mono",monospace;font-weight:400}
@media(max-width:680px){.case-page .yl-ds-jump{margin:0 0 30px}.yl-element-art{height:240px}.case-page .yl-guidelines{margin-top:40px}}
.yl-state-picker{display:flex;gap:32px;border-bottom:1px solid var(--yl-line);margin-bottom:32px}
.yl-motion-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 7%}
.yl-motion-list>li{padding-top:24px;min-width:0}
.yl-motion-list .case-eyebrow{display:block;margin-bottom:16px}
.yl-case .yl-motion-list h3{font-size:27px;margin:0 0 14px}
.yl-motion-list p{font-size:15px;line-height:1.85;color:var(--case-muted);margin:0}
.yl-motion-list p.yl-motion-trigger{font-size:12px;color:var(--case-gold);margin-bottom:12px}
.yl-motion-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 7%;margin-top:48px;padding:32px 0;}
.yl-case .yl-motion-notes h3{font:600 16px/1.6 var(--nz-sans,Arial,sans-serif);letter-spacing:0;margin-bottom:12px}
.yl-motion-notes p{font-size:14px;line-height:1.85;color:var(--case-muted);margin:0}
.yl-motion-states-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:60px}
.yl-motion-states-head .case-eyebrow{margin:0}
@media(max-width:600px){.yl-motion-list,.yl-motion-notes{grid-template-columns:1fr;gap:28px}.yl-case .yl-motion-list h3{font-size:25px}.yl-motion-notes{margin-top:36px}.yl-motion-states-head{margin-top:40px;flex-wrap:wrap;gap:10px}}
.yl-state-picker button{padding:16px 0;background:none;color:var(--case-muted);border:0;border-bottom:2px solid transparent;font-size:15px;cursor:pointer;min-height:48px}
.yl-state-picker button[aria-selected=true]{border-color:var(--case-gold);color:var(--case-ink)}
.yl-state>img{width:100%;aspect-ratio:1645/1078;object-fit:cover;display:block;background:#ede9df}
.yl-state>div{display:grid;grid-template-columns:1fr 1.5fr;gap:9%;padding:32px 0 0}
.yl-state h3{font-size:28px}.yl-state p{font-size:17px;color:var(--case-muted);line-height:1.85;margin:0}
.yl-outcome{display:grid;grid-template-columns:.85fr 1.5fr;gap:14%;padding:46px 0;}
.yl-outcome strong{font:normal clamp(80px,12vw,140px)/1.1 var(--nz-serif);color:var(--case-gold);display:block;margin-bottom:16px}
.yl-outcome p:not(.case-eyebrow){font-size:17px;line-height:1.85;color:var(--case-muted)}
.yl-outcome>div:first-child p:not(.case-eyebrow){font-size:14px;max-width:230px}
.yl-source{display:inline-flex;gap:24px;padding:15px 0;border-bottom:1px solid var(--yl-line);font-size:14px;min-height:48px}
.yl-reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.yl-reference-card{min-width:0}
.yl-reference-image{display:block;aspect-ratio:4/3;overflow:hidden;background:#e7e5df;margin-bottom:24px}
.yl-reference-image img{display:block;width:100%;max-width:none;height:auto}
.yl-ref-emma img{height:100%;object-fit:contain}
.yl-ref-ink img{transform:translateY(-27%)}
.yl-reference-card .case-eyebrow{margin-bottom:12px}
.yl-reference-card h3{font-size:25px;margin-bottom:12px}
.yl-reference-card>p:not(.case-eyebrow){font-size:15px;line-height:1.85;color:var(--case-muted);margin:0 0 16px}
.yl-reference-card>p.yl-reference-credit{font-size:11px;line-height:1.7;margin-bottom:20px}
.yl-reference-link{display:inline-flex;align-items:center;min-height:44px;padding:7px 0;border-bottom:1px solid var(--yl-line);font-size:13px;color:var(--case-gold)}
.yl-reference-image:focus-visible,.yl-reference-link:focus-visible{outline:2px solid var(--case-gold);outline-offset:5px}
.yl-reference-motion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8%;margin-top:48px;padding-top:32px;}
.yl-reference-note{margin:36px 0 0;font-size:12px;line-height:1.8;color:var(--case-muted)}
@media(max-width:850px){.yl-reference-grid{gap:22px}.yl-reference-card h3{font-size:22px}}
@media(max-width:600px){.yl-reference-grid,.yl-reference-motion{grid-template-columns:1fr;gap:36px}.yl-reference-image{aspect-ratio:4/3;margin-bottom:20px}.yl-reference-card h3{font-size:25px}.yl-reference-motion{margin-top:36px}.yl-reference-note{margin-top:28px}}
.yl-case .case-footer{margin-top:0}
.yl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html[lang=zh-CN] .yl-case .case-intro h1{font-family:"Noto Serif SC",SimSun,serif;font-size:clamp(54px,7.3vw,110px);letter-spacing:-.045em}
@media(max-width:850px){.yl-section-head{grid-template-columns:1fr;gap:28px}.yl-section-head>p{max-width:650px}.yl-detail,.yl-detail-reverse{gap:6%}.yl-role-list li{grid-template-columns:32px 1fr;gap:16px 22px}.yl-role-list p{grid-column:2}.yl-credit,.yl-reference{grid-template-columns:1fr;gap:14px}.yl-reference>div{grid-column:1}.yl-case .case-intro-bottom{align-items:flex-start}.yl-case .case-intro-bottom p{max-width:470px}}
@media(max-width:600px){.yl-case .case-nav{gap:18px 12px}.yl-case .case-number{display:none}.yl-case .case-signature{font-size:22px}.yl-case .case-nav>a:first-child{font-size:12px}.yl-case .case-intro{padding-top:48px}.yl-case .case-intro h1{font-size:clamp(44px,11.5vw,68px);letter-spacing:-.045em}.yl-case .case-intro-bottom{display:block}.yl-case .case-discover{margin-top:24px}.yl-case .case-overview{padding:64px 0 80px}.yl-section{padding-bottom:80px}.yl-section-head{margin-bottom:30px}.yl-section-head h2{font-size:32px}.yl-section-head>p{font-size:16px}.yl-compare-label{top:10px;font-size:10px;padding:7px 9px}.yl-before-label{left:10px}.yl-after-label{right:10px}.yl-compare-line b{width:36px;height:36px;font-size:19px}.yl-compare-foot{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:28px}.yl-changes{grid-template-columns:1fr;gap:24px}.yl-role-list h3{font-size:25px}.yl-role-list p{font-size:16px}.yl-credit{padding:24px}.yl-detail,.yl-detail-reverse{grid-template-columns:1fr;gap:24px;margin-top:48px}.yl-detail-reverse figure,.yl-detail-reverse .yl-detail-copy{grid-column:auto;grid-row:auto}.yl-detail-copy p{font-size:16px}.yl-crop{aspect-ratio:1.05}.yl-palette{gap:22px 15px;margin-top:36px}.yl-palette span{flex-basis:45%;font-size:12px}.yl-state-picker{gap:22px}.yl-state-picker button{font-size:13px}.yl-state>div{grid-template-columns:1fr;gap:0;padding-top:24px}.yl-state h3{font-size:25px;margin-bottom:12px}.yl-state p{font-size:16px}.yl-outcome{grid-template-columns:1fr;gap:32px;padding-top:28px}.yl-outcome strong{font-size:90px}.yl-outcome>div:first-child p:not(.case-eyebrow){max-width:none}.yl-reference>div{flex-wrap:wrap}.yl-hero figcaption{font-size:11px}.yl-hero figcaption>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.yl-case *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{.yl-compare input,.yl-state-picker,.yl-compare-foot button{display:none}.yl-state[hidden]{display:block!important}.yl-state{break-inside:avoid;margin-top:32px}}

/* Match the draft portfolio chapter navigation and heading clearance. */
.case-page.yl-case .yl-section{scroll-margin-top:var(--chapter-scroll-offset,110px)}

/* Actual prototype recordings, kept quiet until the reader chooses to play. */
.yl-explorations{padding:38px 0 64px;border-top:1px solid var(--yl-line);scroll-margin-top:var(--chapter-scroll-offset,110px)}
.yl-exploration-heading{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:32px}
.yl-exploration-heading h3{margin-bottom:0}
.yl-exploration-heading>p,.yl-study>p{margin:0;color:var(--case-muted);font-size:15px;line-height:1.9}
.yl-study-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.yl-study{min-width:0}
.yl-study-media{aspect-ratio:1;background:#eeeae1;overflow:hidden}
.yl-study-media video{display:block;width:100%;height:100%;object-fit:contain}
.yl-study-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:12px 0 18px;font-size:11px;letter-spacing:.06em;color:var(--case-gold)}
.yl-study-meta button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 0;color:var(--case-ink);border:0;border-bottom:1px solid var(--yl-line);background:transparent;cursor:pointer;font-size:12px;letter-spacing:0}
.yl-study-meta button:hover{color:var(--case-gold)}
.yl-study-meta button>span:first-child{font-size:18px}
.yl-study-meta button>span:last-child{color:var(--case-muted);font-size:11px}
.yl-case .yl-study h4{font:normal clamp(22px,2.4vw,30px)/1.4 var(--nz-serif);letter-spacing:-.02em;margin:0 0 14px}
.yl-study-caption{font-size:12px;line-height:1.8;color:var(--case-muted);margin:24px 0 0}
.yl-study-takeaway{display:grid;grid-template-columns:180px 1fr;gap:30px;margin-top:30px;padding-top:28px;border-top:1px solid var(--yl-line)}
.yl-study-takeaway>p:last-child{margin:0;color:var(--case-muted);font-size:16px;line-height:1.9;max-width:850px}
@media(max-width:760px){.yl-explorations{padding-top:28px;padding-bottom:48px}.yl-exploration-heading{grid-template-columns:1fr;gap:20px;margin-bottom:24px}.yl-study-grid{grid-template-columns:1fr;gap:38px}.yl-study-meta{margin-bottom:16px}.yl-study-takeaway{grid-template-columns:1fr;gap:2px}.yl-study-takeaway>p:last-child{font-size:15px}}