.s01-hero-mock{--s01-mock: #3e303c;--s01-mock-accent: #e396da}.s01-hero-mock{position:relative;aspect-ratio:616 / 424;display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5);background:var(--s01-mock);border-radius:var(--r-2xl);border:0;overflow:visible}html .s01-hero-mock.scene-plate[data-hero-mock]{background:var(--s01-mock)}.s01-hero-mock-bar{display:flex;align-items:center;gap:var(--s-3);min-height:28px}.s01-hero-mock-sizes{display:inline-flex;flex:none;gap:2px;padding:2px;border-radius:var(--r-full);background:#ffffff14}.s01-hero-mock-sizes button{position:relative;height:24px;padding:0 10px;border:0;border-radius:var(--r-full);background:none;font:500 12px/1 var(--font-ui);color:#b2b2ba;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-tint) var(--ease-tint),color var(--dur-tint) var(--ease-tint)}.s01-hero-mock-sizes button:hover{color:#ededee}.s01-hero-mock-sizes button[aria-pressed=true]{background:var(--s01-mock-accent);color:var(--s01-mock)}.s01-hero-mock-sizes button:focus-visible{outline:2px solid var(--s01-mock-accent);outline-offset:2px}.s01-hero-mock-sizes button:after{content:"";position:absolute;inset:-10px 0}.s01-hero-mock-model{flex:none;font:400 12px/1.3 var(--font-code);color:#ededee;background:#ffffff14;padding:2px 8px;border-radius:var(--r-full)}.s01-hero-mock-note{margin-left:auto;font:500 12px/1.3 var(--font-ui);color:#b2b2ba;white-space:nowrap}.s01-hero-mock-screen{flex:1 0 auto;display:flex;flex-direction:column;gap:var(--s-4)}.s01-hero-mock-message{background:#ffffff0f;border:1px solid rgba(255,255,255,.11);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:6px}.s01-hero-mock-message-head{display:flex;align-items:center;gap:8px}.s01-hero-mock-avatar{flex:none;width:24px;height:24px;border-radius:50%;background:#ffffff1f;color:#ededee;display:grid;place-items:center;font:500 12px/1 var(--font-ui)}.s01-hero-mock-message-name{font:500 13px/1.3 var(--font-ui);color:#ededee}.s01-hero-mock-message-time{margin-left:auto;font:400 12px/1.3 var(--font-ui);color:#b2b2ba}.s01-hero-mock-message-subject{font:500 14px/1.4 var(--font-ui);color:#ededee;margin:0}.s01-hero-mock-message-body{font:400 13px/1.5 var(--font-ui);color:#b2b2ba;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.s01-hero-mock-answers{display:grid;grid-template-columns:minmax(48px,60px) minmax(0,1fr) auto;align-items:center;gap:14px 10px}.s01-hero-mock-answer{display:contents}.s01-hero-mock-answer-label{font:400 13px/1.3 var(--font-ui);color:#b2b2ba}.s01-hero-mock-answer-track{position:relative;display:block;height:6px;border-radius:var(--r-full);background:#ffffff1f}.s01-hero-mock-answer-track:before{content:"";position:absolute;left:85%;top:-4px;bottom:-4px;width:1px;background:#ffffff57}.s01-hero-mock-answer-track i{position:relative;display:block;width:var(--value);height:100%;border-radius:inherit;background:var(--s01-mock-accent);transition:width .42s var(--ease-move)}.s01-hero-mock-answer:nth-child(2) .s01-hero-mock-answer-track i{transition-delay:60ms}.s01-hero-mock-answer:nth-child(3) .s01-hero-mock-answer-track i{transition-delay:.12s}.s01-hero-mock-answer-value{justify-self:end;font:500 13px/1.3 var(--font-code);color:#ededee;font-variant-numeric:tabular-nums;white-space:nowrap}.s01-hero-mock-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-3);border-top:1px solid rgba(255,255,255,.11)}.s01-hero-mock-foot-outcome{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);min-width:0}.s01-hero-mock-foot-group{display:flex;flex-direction:column;gap:2px;min-width:0}.s01-hero-mock-foot-label{font:400 12px/1.3 var(--font-ui);color:#b2b2ba}.s01-hero-mock-foot-value{font:500 13px/1.3 var(--font-ui);color:#ededee}.s01-hero-mock-latency{flex:none;font:500 13px/1.3 var(--font-code);color:var(--s01-mock-accent);font-variant-numeric:tabular-nums}@media (prefers-reduced-motion: reduce){.s01-hero-mock-answer-track i{transition:none}}@media (max-width: 960px){.s01-hero-mock{aspect-ratio:auto}}@media (max-width: 720px){.s01-hero-mock{border-radius:var(--r-xl)}}.hero .hero-artifact .s01-hero-mock.scene-plate{border-radius:20px}@media (max-width: 480px){.s01-hero-mock-model{display:none}}