.mock__chrome{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#ededf1;border-bottom:1px solid #DEDEE4}.mock__dots{display:flex;gap:5px}.mock__dots i{width:8px;height:8px;border-radius:50%;background:#c9c9d1;display:block}.mock__url{flex-grow:1;display:flex;align-items:center;gap:6px;height:22px;padding:0 10px;background:#fff;border:1px solid var(--hairline-2);border-radius:var(--r-pill);font-size:9.5px;color:var(--ink-soft)}.prod__media{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-btn)}.prod__media>.mock__chrome,.prod__media>.code__bar{height:30px;padding-block:0;flex-shrink:0}.prod__media>.mock__chrome{gap:7px;padding-inline:10px}.prod__media .mock__dots{gap:4px}.prod__media .mock__dots i{width:6px;height:6px}.prod__media .mock__url{height:17px;gap:4px;padding:0 8px;font-size:8.5px}.prod__media>.code__bar i{width:6px;height:6px}.prod__media>.code__bar span{font-size:9px}.prod__media--shot{background:var(--surface);box-shadow:0 16px 38px #282c3e42}.prod__media--photo{margin:0;background:#0e1119;box-shadow:0 16px 38px #0000006b}.prod__media>.photo__bar{display:flex;align-items:center;gap:7px;flex-shrink:0;padding:9px 15px;background:#ffffff0d;border-top:1px solid rgba(255,255,255,.08);font-size:10.5px;letter-spacing:.04em;color:#ffffff80}.photo__live{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex-shrink:0}.prod__photo{flex:1;width:100%;min-height:0;object-fit:cover;object-position:center}.prod__shot{flex:1;width:100%;min-height:0;object-fit:contain;object-position:top center}.prod__media--audit{background:var(--surface);box-shadow:0 16px 38px #282c3e42}.audit__body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:16px 18px;min-height:0}.audit__title{color:var(--ink-soft);font-size:10px}.audit__rows{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}.audit__row{display:grid;grid-template-columns:minmax(74px,.9fr) auto minmax(0,1.3fr);align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}.audit__row:last-child{padding-bottom:0;border-bottom:0}.audit__axis{font-size:12.5px;font-weight:700;color:var(--ink)}.audit__gauge{display:flex;gap:3px}.audit__gauge i{display:block;width:14px;height:7px;border-radius:2px;background:var(--hairline-2)}.audit__gauge i.is-on{background:var(--yellow)}.audit__state{font-size:11px;color:var(--ink-soft);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.audit__out{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex-shrink:0;padding:9px 15px;background:#0e1119;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;font-weight:700;color:var(--yellow)}.code{background:#0e1119;box-shadow:inset 0 0 0 1px #fcc40d24,0 16px 38px #0000006b}.code__bar{display:flex;align-items:center;gap:5px;padding-inline:13px;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.08)}.code__bar i{width:7px;height:7px;border-radius:50%;background:#fff3;display:block}.code__bar span{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;letter-spacing:.04em;color:#ffffff6b}.code__body{flex:1;display:flex;align-items:center;margin:0;padding:12px 15px;overflow-x:auto}.code__body code{display:block;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(10px,1.05vw,12.5px);line-height:1.72;color:#fff9}.code__com{color:#ffffff5c;font-style:italic}.code__cmd{color:var(--yellow);font-weight:700}.code__key{color:var(--yellow)}.code__val{color:var(--sky)}.code__out{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex-shrink:0;padding:9px 15px;border-top:1px solid rgba(255,255,255,.08);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:#ffffff70}.code__dot{width:6px;height:6px;border-radius:50%;background:var(--sky);flex-shrink:0}.code__ok{color:var(--sky);font-weight:700}.code__punch{color:var(--yellow);font-weight:700}@media(min-width:1025px){.prod__media{height:clamp(300px,30vw,348px)}}.mock{background:var(--surface);color:var(--ink);border-radius:var(--r-card);overflow:hidden;box-shadow:0 26px 64px #00000080}.mock__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:#fff;border-bottom:1px solid #F1F1F4}.mock__tabs{display:flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-pill);background:#f2f2f6}.mock__tabs span{padding:4px 9px;border-radius:var(--r-pill);font-size:9px;font-weight:600;color:#7c8296;white-space:nowrap}.mock__tabs span.is-on{font-weight:700;color:var(--ink);background:#fff;box-shadow:0 1px 3px #282c3e29}.mock__body{display:flex;background:var(--surface-2)}.mock__rail{width:42px;flex-shrink:0;border-right:1px solid #F1F1F4;padding:11px 0;display:flex;flex-direction:column;align-items:center;gap:11px}.mock__conv{flex-grow:1;padding:13px 14px;display:flex;flex-direction:column;gap:11px;min-height:196px}.mock__who{display:flex;align-items:center;gap:7px}.mock__avatar{width:17px;height:17px;border-radius:50%;background:var(--yellow);flex-shrink:0}.mock__q{font-size:11px;line-height:1.45;color:var(--ink)}.mock__a{display:flex;flex-direction:column;gap:4px;font-size:10.5px;line-height:1.5;color:#3a4052}.mock__chip{padding:3px 8px;border-radius:var(--r-pill);font-size:8.5px;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid #E6E6EC}.mock__input{display:flex;align-items:center;gap:8px;height:34px;padding:0 5px 0 11px;border:1px solid #E4E4EA;border-radius:var(--r-btn)}.mock__send{margin-left:auto;width:26px;height:26px;border-radius:var(--r-btn);background:var(--yellow);display:flex;align-items:center;justify-content:center}.mock .tl{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0}.mock .cur{display:inline-block;width:1.5px;height:11px;background:currentColor;vertical-align:-1px;margin-left:2px;visibility:hidden}.mock .q1{animation:hm-typeQ 10s steps(44,end) infinite}.mock .a1{animation:hm-typeA1 10s steps(52,end) infinite}.mock .a2{animation:hm-typeA2 10s steps(32,end) infinite}.mock .a3{animation:hm-typeA3 10s steps(42,end) infinite}.mock .qc{animation:hm-blink .9s step-end infinite,hm-winQ 10s linear infinite}.mock .c1{animation:hm-blink .9s step-end infinite,hm-win1 10s linear infinite}.mock .c2{animation:hm-blink .9s step-end infinite,hm-win2 10s linear infinite}.mock .c3{animation:hm-blink .9s step-end infinite,hm-win3 10s linear infinite}.mock .think{opacity:0;animation:hm-fadeThink 10s ease infinite}.mock .a-head{opacity:0;animation:hm-fadeHead 10s ease infinite}.mock .a-src{opacity:0;animation:hm-fadeSrc 10s ease infinite}.mock .a-note{opacity:0;animation:hm-fadeNote 10s ease infinite}@keyframes hm-blink{0%,49%{opacity:1}50%,to{opacity:0}}@keyframes hm-typeQ{0%{max-width:0}16%,93%{max-width:300px}97%,to{max-width:0}}@keyframes hm-typeA1{0%,31%{max-width:0}42%,93%{max-width:340px}97%,to{max-width:0}}@keyframes hm-typeA2{0%,42%{max-width:0}49%,93%{max-width:230px}97%,to{max-width:0}}@keyframes hm-typeA3{0%,49%{max-width:0}58%,93%{max-width:290px}97%,to{max-width:0}}@keyframes hm-winQ{0%,15.9%{visibility:visible}16%,to{visibility:hidden}}@keyframes hm-win1{0%,30.9%{visibility:hidden}31%,41.9%{visibility:visible}42%,to{visibility:hidden}}@keyframes hm-win2{0%,41.9%{visibility:hidden}42%,48.9%{visibility:visible}49%,to{visibility:hidden}}@keyframes hm-win3{0%,48.9%{visibility:hidden}49%,59.9%{visibility:visible}60%,to{visibility:hidden}}@keyframes hm-fadeThink{0%,18%{opacity:0}20%,27%{opacity:1}29%,to{opacity:0}}@keyframes hm-fadeHead{0%,29%{opacity:0}31%,93%{opacity:1}97%,to{opacity:0}}@keyframes hm-fadeSrc{0%,60%{opacity:0}64%,93%{opacity:1}97%,to{opacity:0}}@keyframes hm-fadeNote{0%,65%{opacity:0}69%,93%{opacity:1}97%,to{opacity:0}}@media(max-width:560px){.mock__conv{min-height:150px}}