.mug-demo.mk-1s6h2tl{margin-block:var(--space-l);cursor:pointer;container-type:inline-size}.mug-grid.mk-1s6h2tl{gap:var(--space-m);grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;display:grid}@container (width<=36rem){.mug-grid.mk-1s6h2tl{grid-template-columns:minmax(0,1fr)}}.code.mk-1s6h2tl{position:relative}.file.mk-1s6h2tl{z-index:1;border:1px solid color-mix(in oklch, var(--on-accent) 55%, transparent);--light-raised:oklch(93.12% .0264 79);background:color-mix(in oklch, var(--green-soft) 50%, var(--light-raised));color:var(--on-accent);font-family:Joy Elia,system-ui,sans-serif;font-size:var(--step--1);border-radius:7px;padding:.05em .7em;position:absolute;top:-1rem;left:.9rem}pre.mk-1s6h2tl{padding:var(--space-s);padding-top:calc(var(--space-s) + .4rem);background:var(--raised);font-family:var(--font-mono);font-size:var(--step--2);border:1px solid #92837099;border-radius:8px;margin:0;line-height:160%;overflow-x:auto;box-shadow:-4px 6px 6px #92837099}.line.mk-1s6h2tl{white-space:pre;border-radius:3px;padding-inline:.25em;transition:background .15s;display:block}.num.mk-1s6h2tl{opacity:.4;-webkit-user-select:none;user-select:none;width:1.9em;display:inline-block}article.mk-1s6h2tl{color:oklch(28% .015 90);text-align:center;background:#fdfbf3;border:1px solid #d9cfc0;border-radius:5px;flex-direction:column;justify-self:center;width:min(100%,15.5rem);padding:.6rem .6rem .5rem;display:flex;position:relative;rotate:2deg;box-shadow:-5px 8px 10px #92837080,0 1px 2px #92837059}.tape.mk-1s6h2tl{background:color-mix(in oklch, var(--green-star) 55%, oklch(91.4% .033 79));opacity:.95;z-index:2;border:1px solid #33302a38;width:5.5rem;height:1.7rem;position:absolute;top:-.85rem;left:50%;transform:translate(-50%)rotate(-4deg)}.photo.mk-1s6h2tl{background:#f4ebd9;border:1px solid #463f3440;border-radius:2px;flex-direction:column;align-items:center;gap:.55rem;padding:1.2rem .8rem 1rem;transition:background .15s;display:flex}.mug.mk-1s6h2tl{border-radius:3px;width:88%;height:auto;transition:background .15s}article h3.mk-1s6h2tl{white-space:nowrap;text-shadow:none;margin:0;padding-inline:.2em;font-family:Joy Elia,system-ui,sans-serif;font-size:1.3rem;line-height:115%;color:oklch(28% .015 90)!important}article p.mk-1s6h2tl{font-size:var(--step--1);color:#33302acc;margin:0}button.mk-1s6h2tl{color:oklch(28% .015 90);font-family:Joy Elia,system-ui,sans-serif;font-size:var(--step-0);cursor:pointer;background:0 0;border:none;border-radius:6px;align-self:flex-start;align-items:center;gap:.35em;margin-top:.45rem;margin-left:.15rem;padding:.15em .5em;display:flex}button img.mk-1s6h2tl,button span.mk-1s6h2tl{pointer-events:none}button img.mk-1s6h2tl{width:1.9rem;transition:transform .12s}button:hover img.mk-1s6h2tl{transform:scale(1.12)rotate(-4deg)}button:active img.mk-1s6h2tl{transform:scale(.9)}h3.mk-1s6h2tl,article p.mk-1s6h2tl,button.mk-1s6h2tl,button span.mk-1s6h2tl{border-radius:3px;padding-block:.12em;padding-inline:.4em;transition:background .15s}.hot.mk-1s6h2tl{background:color-mix(in oklch, var(--yellow) 45%, transparent)}article.hot.mk-1s6h2tl{background:color-mix(in oklch, var(--yellow) 30%, #fdfbf3)}html[data-theme=dark] pre.mk-1s6h2tl{box-shadow:-4px 6px 6px #0000008c}html[data-theme=dark] article.mk-1s6h2tl{box-shadow:-5px 8px 12px #0000008c,0 2px 4px #00000073}