.showpiece{border-radius:var(--radius-2xl);background:radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--coral) 9%, transparent), transparent 70%), color-mix(in srgb, var(--stage-fade) 58%, transparent);box-shadow:var(--shadow-panel);-webkit-backdrop-filter:none;backdrop-filter:none;position:relative;overflow:hidden}.showpiece__stage{--sp-u:calc(100cqi / 3900);--sp-ui:2.9;aspect-ratio:1152/402;position:relative;overflow:hidden;container-type:inline-size}.showpiece__screen{--u:var(--sp-u);top:calc(130 * var(--sp-u));left:calc(130 * var(--sp-u));width:calc(1790 * var(--sp-u));height:calc(1100 * var(--sp-u));border-radius:calc(var(--mk-rw) * var(--sp-u) * var(--sp-ui));background:var(--dev-wall);box-shadow:0 0 0 1px var(--dev-line), var(--mk-lift);isolation:isolate;position:absolute;overflow:hidden}.showpiece__screen--b{left:calc(1980 * var(--sp-u))}.showpiece__ui{--u:calc(var(--sp-u) * var(--sp-ui));z-index:1;position:absolute;inset:0}.showpiece .showpiece__bar{height:calc(26 * var(--u));padding:0 calc(10 * var(--u)) 0 calc(14 * var(--u));background:color-mix(in srgb, var(--dev-glass-2) 70%, transparent);color:var(--dev-text);text-shadow:none}.showpiece .showpiece__bar .mk-mb-l{gap:calc(14 * var(--u))}.showpiece .showpiece__bar .mk-mb-apple{width:calc(15 * var(--u));height:calc(15 * var(--u))}.showpiece .showpiece__bar .mk-mb-r{gap:calc(6 * var(--u))}.showpiece .showpiece__bar .mk-mb-i{height:calc(20 * var(--u));padding:0 calc(3 * var(--u))}.showpiece .showpiece__bar .mk-mb-i .mk-g{font-size:calc(14 * var(--u))}.showpiece .showpiece__bar .mk-mb-i .mk-g--battery{font-size:calc(21 * var(--u))}.showpiece .showpiece__bar .mk-mb-i:has(.mk-g--search),.showpiece .showpiece__bar .mk-mb-i:has(.mk-g--control){display:none}.showpiece__desk{inset:calc(26 * var(--u)) 0 0;padding:calc(20 * var(--u)) 0 calc(22 * var(--u));justify-items:center;display:grid;position:absolute}.showpiece .showpiece__win{width:86%;height:100%;position:relative}.showpiece .showpiece__win .mk-lights{top:calc(14 * var(--u));left:calc(14 * var(--u));gap:calc(7 * var(--u))}.showpiece .showpiece__win .mk-lights i{width:calc(11 * var(--u));height:calc(11 * var(--u))}.sp-notes{grid-template-columns:38% 1fr;display:grid}.sp-notes__list{padding:calc(38 * var(--u)) calc(8 * var(--u)) 0;border-right:1px solid var(--mk-sep)}.sp-notes__row{gap:calc(2 * var(--u));padding:calc(7 * var(--u)) calc(9 * var(--u));border-radius:calc(6 * var(--u));border-bottom:1px solid var(--mk-sep);font-size:calc(10 * var(--u));white-space:nowrap;margin:0;display:grid;overflow:hidden}.sp-notes__row b{font-size:calc(10.5 * var(--u));font-weight:600}.sp-notes__row span{color:var(--mk-ink-3);text-overflow:ellipsis;overflow:hidden}.sp-notes__row em{margin-right:calc(6 * var(--u));color:var(--mk-ink);font-style:normal}.sp-notes__row--on{background:var(--mk-fill-2);border-bottom-color:#0000}.sp-notes__body{min-width:0;padding:calc(12 * var(--u)) calc(16 * var(--u)) 0}.sp-notes__date{margin:0 0 calc(10 * var(--u));color:var(--mk-ink-3);font-size:calc(9 * var(--u));text-align:center}.showpiece__note-h{margin:0 0 calc(6 * var(--u));font-size:calc(14 * var(--u));font-weight:700;line-height:1.2}.showpiece__note-li{gap:calc(7 * var(--u));font-size:calc(11 * var(--u));white-space:nowrap;margin:0;line-height:1.6;display:flex}.showpiece__note-li:before{width:calc(4 * var(--u));height:calc(4 * var(--u));margin-top:calc(8 * var(--u));content:"";background:currentColor;border-radius:50%;flex:none}.sp-mail{padding:0 calc(18 * var(--u));flex-direction:column;display:flex}.sp-mail__bar{height:calc(40 * var(--u));align-items:center;gap:calc(10 * var(--u));margin:0 calc(-18 * var(--u)) calc(4 * var(--u));padding:0 calc(14 * var(--u)) 0 calc(70 * var(--u));border-bottom:1px solid var(--mk-sep);flex:none;display:flex}.sp-mail__send{color:var(--mk-blue);font-size:calc(14 * var(--u))}.sp-mail__tool{color:var(--mk-ink-2);font-size:calc(14 * var(--u))}.sp-mail__title{font-size:calc(12.5 * var(--u));text-align:center;flex:1;font-weight:700}.showpiece__mail-f{gap:calc(6 * var(--u));padding:calc(5 * var(--u)) 0;border-bottom:1px solid var(--mk-sep);color:var(--mk-ink-3);font-size:calc(12 * var(--u));margin:0;display:flex}.showpiece__mail-f span{color:var(--mk-ink)}.sp-mail__body{padding-top:calc(8 * var(--u))}.showpiece__line{min-height:1.5em;font-size:calc(12 * var(--u));margin:0;line-height:1.5;position:relative}.sp-mail__quote-h{margin:calc(14 * var(--u)) 0 calc(4 * var(--u));color:var(--mk-ink-3);font-size:calc(11 * var(--u))}.sp-mail__quote{padding-left:calc(8 * var(--u));border-left:calc(2 * var(--u)) solid color-mix(in srgb, var(--mk-blue) 55%, transparent);color:var(--mk-ink-2);font-size:calc(11 * var(--u));margin:0}.showpiece__caret0{opacity:0;position:absolute;top:.15em;left:0}.showpiece__typed{white-space:nowrap;display:inline-block}.showpiece{--sp-glow:var(--coral)}.showpiece__glow{opacity:.85}.showpiece .showpiece__glow.mk-glow--r{background:linear-gradient(270deg, color-mix(in srgb, var(--sp-glow) 95%, transparent) 0 max(1px, calc(2 * var(--u))), color-mix(in srgb, var(--sp-glow) 50%, transparent) max(1px, calc(2 * var(--u))), color-mix(in srgb, var(--sp-glow) 20%, transparent) 45%, transparent 100%)}.showpiece__ptr{--u:var(--sp-u);z-index:5}.showpiece .mk-ptr__arrow{width:clamp(12px, calc(17 * var(--sp-u) * var(--sp-ui)), 18px)}.showpiece .mk-ptr__ibeam{width:clamp(7px, calc(9 * var(--sp-u) * var(--sp-ui)), 10px)}.showpiece__ptr{transform:translate(calc(2006 * var(--sp-u)), calc(650 * var(--sp-u)))}.showpiece .motion-sp-ptr{animation:10s linear infinite sp-ptr}.showpiece .motion-sp-arrow{animation:10s linear infinite sp-arrow}.showpiece .motion-sp-ibeam{animation:10s linear infinite sp-ibeam}.showpiece .motion-sp-glow{animation:10s linear infinite sp-glow}.showpiece .motion-sp-caret0{animation:10s linear infinite sp-caret0}.showpiece .motion-sp-type{animation:10s linear infinite sp-type}.showpiece .motion-sp-caret{animation:10s linear infinite sp-caret}.showpiece .motion-sp-line{animation:10s linear infinite sp-line}@keyframes sp-ptr{0%,10%{transform:translate(calc(1450 * var(--sp-u)), calc(880 * var(--sp-u)));opacity:1;animation-timing-function:cubic-bezier(.5,0,.9,.6)}22%{transform:translate(calc(1915 * var(--sp-u)), calc(650 * var(--sp-u)));animation-timing-function:linear}26.9%{transform:translate(calc(1916 * var(--sp-u)), calc(650 * var(--sp-u)))}27%{transform:translate(calc(1984 * var(--sp-u)), calc(650 * var(--sp-u)));animation-timing-function:cubic-bezier(.2,.7,.3,1)}37%{transform:translate(calc(2290 * var(--sp-u)), calc(666 * var(--sp-u)))}38%{transform:translate(calc(2290 * var(--sp-u)), calc(666 * var(--sp-u))) scale(.88)}39%{transform:translate(calc(2290 * var(--sp-u)), calc(666 * var(--sp-u)));opacity:1}40.5%,91.9%{transform:translate(calc(2290 * var(--sp-u)), calc(666 * var(--sp-u)));opacity:0}92%{transform:translate(calc(1450 * var(--sp-u)), calc(880 * var(--sp-u)));opacity:0}96%,to{transform:translate(calc(1450 * var(--sp-u)), calc(880 * var(--sp-u)));opacity:1}}@keyframes sp-ptr-compact{0%,10%{transform:translate(calc(1450 * var(--sp-u)), calc(880 * var(--sp-u)));opacity:1;animation-timing-function:cubic-bezier(.5,0,.9,.6)}22%{transform:translate(calc(1915 * var(--sp-u)), calc(650 * var(--sp-u)));animation-timing-function:linear}26.9%{transform:translate(calc(1916 * var(--sp-u)), calc(650 * var(--sp-u)))}27%{transform:translate(calc(1984 * var(--sp-u)), calc(650 * var(--sp-u)));animation-timing-function:cubic-bezier(.2,.7,.3,1)}37%{transform:translate(calc(2290 * var(--sp-u)), calc(925 * var(--sp-u)))}38%{transform:translate(calc(2290 * var(--sp-u)), calc(925 * var(--sp-u))) scale(.88)}39%{transform:translate(calc(2290 * var(--sp-u)), calc(925 * var(--sp-u)));opacity:1}40.5%,91.9%{transform:translate(calc(2290 * var(--sp-u)), calc(925 * var(--sp-u)));opacity:0}92%{transform:translate(calc(1450 * var(--sp-u)), calc(880 * var(--sp-u)));opacity:0}96%,to{transform:translate(calc(1450 * var(--sp-u)), calc(880 * var(--sp-u)));opacity:1}}@keyframes sp-arrow{0%,34.9%{opacity:1}35%,91.9%{opacity:0}92%,to{opacity:1}}@keyframes sp-ibeam{0%,34.9%{opacity:0}35%,91.9%{opacity:1}92%,to{opacity:0}}@keyframes sp-glow{0%,19%{opacity:0}23%,27%{opacity:1}34%,to{opacity:0}}@keyframes sp-caret0{0%,38.9%{opacity:0}39%,40.9%{opacity:1}41%,to{opacity:0}}@keyframes sp-type{0%,41%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(24,end)}56%,91.9%{clip-path:inset(0)}92%,to{clip-path:inset(0 100% 0 0)}}@keyframes sp-caret{0%,55.9%{opacity:0}56%,62%{opacity:1}62.1%,68%{opacity:0}68.1%,74%{opacity:1}74.1%,80%{opacity:0}80.1%,86%{opacity:1}86.1%,to{opacity:0}}@keyframes sp-line{0%,88%{opacity:1}91.5%,92%{opacity:0}92.1%,to{opacity:1}}.showpiece--compact .showpiece__stage{--sp-ui:5.4}.showpiece--compact .showpiece__desk{padding:calc(14 * var(--u)) 0}.showpiece--compact .sp-mail__cc,.showpiece--compact .showpiece__note-li:nth-of-type(n+6){display:none}.showpiece--compact .sp-notes{grid-template-columns:1fr}.showpiece--compact .sp-notes__list,.showpiece--compact .sp-notes__date,.showpiece--compact .sp-mail__quote-h,.showpiece--compact .sp-mail__quote,.showpiece.showpiece--compact .showpiece__bar .mk-mb-l span:nth-of-type(n+2),.showpiece.showpiece--compact .showpiece__bar .mk-mb-i:has(.mk-g){display:none}.showpiece--compact .motion-sp-ptr{animation-name:sp-ptr-compact}.showpiece--compact .sp-notes__body{padding-top:calc(36 * var(--u))}.showpiece--compact .showpiece .showpiece__win,.showpiece--compact .showpiece__win{width:90%}@media (width<=700px){.showpiece__stage{--sp-u:calc(100cqi / 1950);--sp-ui:4.73;aspect-ratio:350/460}.showpiece__screen{top:calc(129 * var(--sp-u));left:calc(129 * var(--sp-u));width:calc(1692 * var(--sp-u));height:calc(1122 * var(--sp-u))}.showpiece__screen--b{top:calc(1311 * var(--sp-u));left:calc(129 * var(--sp-u));height:calc(1123 * var(--sp-u))}.sp-notes{grid-template-columns:1fr}.sp-notes__list{display:none}.sp-notes__body{padding-top:calc(36 * var(--u))}.sp-notes__date,.sp-mail__quote-h,.sp-mail__quote{display:none}.showpiece .showpiece__win{width:90%}.showpiece__glow{-webkit-mask-image:linear-gradient(90deg, transparent, var(--mk-black) 22%, var(--mk-black) 78%, transparent);-webkit-mask-image:linear-gradient(90deg, transparent, var(--mk-black) 22%, var(--mk-black) 78%, transparent);mask-image:linear-gradient(90deg, transparent, var(--mk-black) 22%, var(--mk-black) 78%, transparent);width:auto;height:calc(44 * var(--sp-u));background:linear-gradient(0deg, color-mix(in srgb, var(--sp-glow) 95%, transparent) 0 max(1px, calc(2 * var(--sp-u))), color-mix(in srgb, var(--sp-glow) 50%, transparent) max(1px, calc(2 * var(--sp-u))), color-mix(in srgb, var(--sp-glow) 20%, transparent) 45%, transparent 100%);min-height:6px;inset:auto 0 0}.showpiece__ptr{transform:translate(calc(1000 * var(--sp-u)), calc(1340 * var(--sp-u)))}.showpiece .motion-sp-ptr{animation-name:sp-ptr-stacked}}@keyframes sp-ptr-stacked{0%,10%{transform:translate(calc(1200 * var(--sp-u)), calc(1120 * var(--sp-u)));opacity:1;animation-timing-function:cubic-bezier(.5,0,.9,.6)}22%{transform:translate(calc(1000 * var(--sp-u)), calc(1246 * var(--sp-u)));animation-timing-function:linear}26.9%{transform:translate(calc(1001 * var(--sp-u)), calc(1247 * var(--sp-u)))}27%{transform:translate(calc(1001 * var(--sp-u)), calc(1315 * var(--sp-u)));animation-timing-function:cubic-bezier(.2,.7,.3,1)}37%{transform:translate(calc(448 * var(--sp-u)), calc(2168 * var(--sp-u)))}38%{transform:translate(calc(448 * var(--sp-u)), calc(2168 * var(--sp-u))) scale(.88)}39%{transform:translate(calc(448 * var(--sp-u)), calc(2168 * var(--sp-u)));opacity:1}40.5%,91.9%{transform:translate(calc(448 * var(--sp-u)), calc(2168 * var(--sp-u)));opacity:0}92%{transform:translate(calc(1200 * var(--sp-u)), calc(1120 * var(--sp-u)));opacity:0}96%,to{transform:translate(calc(1200 * var(--sp-u)), calc(1120 * var(--sp-u)));opacity:1}}.showpiece__foot{border-top:1px solid var(--line-2);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem clamp(1.25rem,3.5vw,3.25rem);display:flex}.showpiece__foot h3{color:var(--text);letter-spacing:-.03em;font-size:1.15rem;font-weight:700}.showpiece__foot p{color:var(--text-muted);margin-top:.25rem;font-size:.9rem}.showpiece__chip{border:1px solid var(--line);background:var(--panel-2);color:var(--text-muted);font-family:var(--font-mono);border-radius:999px;align-items:center;gap:.45rem;padding:.34rem .7rem;font-size:.68rem;display:inline-flex}.showpiece__chip i{background:var(--color-secure);border-radius:50%;width:6px;height:6px;display:block}