@layer typography{.prose{max-width:68ch;& a{color:var(--color-text);transition:background-size var(--duration-base) var(--ease-spring), color var(--duration-fast) ease;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0% 1px;@media (hover:hover){&:hover{color:var(--color-accent);background-size:100% 1px}}}& ul{list-style:none;& li{margin-block:.5rem;padding-inline-start:1.5rem;position:relative;&:before{content:"";inset-inline-start:0;background-color:var(--color-accent);opacity:.7;border-radius:2px;width:.4rem;height:.4rem;position:absolute;top:.7em;transform:rotate(45deg)}}}& ol{list-style:decimal;& ::marker{color:var(--color-accent);font-size:.95em;font-weight:600;font-family:var(--font-title)}}& aside{background:var(--color-surface);border:1px solid var(--color-border);border-inline-start:3px solid var(--color-accent);border-radius:var(--radius-md);color:var(--color-muted);box-shadow:var(--shadow-soft);margin-block:2rem;padding:1.25rem 1.5rem;font-size:.95rem}}blockquote{border-inline-start:3px solid var(--color-accent);background:var(--tint-05);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-muted);margin-inline:0;padding:1rem 1.5rem;font-style:italic;&>*+*{margin-block-start:.75rem}}}@layer components{.table-wrapper,.prose table{border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);width:max-content;max-width:100%;box-shadow:var(--shadow-soft);transition:border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;contain:layout paint style;content-visibility:auto;contain-intrinsic-size:auto 400px;margin-block:2.5rem;display:block;overflow-x:auto;@media (hover:hover){&:hover{border-color:rgba(var(--accent), .2);box-shadow:var(--shadow-strong)}}}table{border-collapse:collapse;width:100%;font-size:.95em}caption{font-size:.8rem;font-family:var(--font-title);letter-spacing:.02em;color:var(--color-muted);text-align:start;caption-side:top;padding-block-end:.75rem;font-style:italic}:is(th,td){text-align:start;border-bottom:1px solid var(--color-border);vertical-align:top;color:var(--color-text);padding:1rem 1.25rem}thead th{color:var(--color-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75em;font-family:var(--font-title);background:var(--tint-05);border-bottom:1px solid var(--color-border);white-space:nowrap;font-weight:600}tfoot :is(th,td){background:var(--tint-05);color:var(--color-text);border-top:1px solid var(--color-border);border-bottom:none;font-size:.9em;font-weight:600}tbody tr{transition:background var(--duration-fast) ease;&:last-child :is(th,td){border-bottom:none}@media (hover:hover) and (prefers-reduced-motion:no-preference){&:hover{background:var(--tint-05)}}}@media (width<=768px){.table-wrapper,.prose table{margin-inline:calc(-1 * var(--content-padding-mobile));width:calc(100% + 2 * var(--content-padding-mobile));max-width:calc(100% + 2 * var(--content-padding-mobile));border-inline:none;border-radius:0}table{white-space:nowrap}:is(th,td){padding:.75rem 1rem;font-size:.9em}}details{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;margin-block:1rem;overflow:hidden;&[open]{background:var(--color-surface);box-shadow:var(--shadow-soft);border-color:rgba(var(--accent), .2)}&[open]>summary{border-bottom:1px solid var(--color-border)}&[open]>summary:after{border-color:var(--color-text);transform:rotate(225deg)}&>:not(summary){padding-inline:1.25rem}&>:not(summary):last-child{padding-bottom:1.25rem}& details>:not(summary){padding-inline:0}& details>:not(summary):last-child{padding-bottom:0}}summary{font-weight:500;font-family:var(--font-title);color:var(--color-text);cursor:pointer;user-select:none;transition:color var(--duration-fast) ease;justify-content:space-between;align-items:center;gap:.75rem;padding:1rem 1.25rem;font-size:1rem;list-style:none;display:flex;&::-webkit-details-marker{display:none}&:after{content:"";border-right:1.8px solid var(--color-muted);border-bottom:1.8px solid var(--color-muted);width:.45rem;height:.45rem;transition:transform var(--duration-base) var(--ease-spring), border-color var(--duration-fast) ease;border-radius:1px;flex-shrink:0;transform:rotate(45deg)}@media (hover:hover){&:hover{color:var(--color-accent)}}}pre{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-strong);contain:layout style;content-visibility:auto;contain-intrinsic-size:auto 300px;margin-block:2.5rem;padding:1.5rem 1.75rem;position:relative;overflow-x:auto;&:before{content:"";border-radius:var(--radius-lg);background:linear-gradient(145deg, rgba(var(--accent), .03), transparent 50%);pointer-events:none;position:absolute;inset:0}& code{color:rgba(var(--text), .9);background:0 0;border:none;padding:0;font-size:.9em}@media (width<=480px){border-radius:0;margin-block:1.5rem;margin-inline:-1rem;padding:1.25rem;font-size:.85em}}kbd{font-family:var(--font-code);background:var(--color-surface);border:1px solid var(--tint-20);border-radius:var(--radius-sm);color:var(--color-text);white-space:nowrap;box-shadow:0 2px 0 var(--tint-10);border-bottom-width:2px;padding:.2em .5em;font-size:.82em}.prose pre button.copy-btn{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-muted);font-family:var(--font-code);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;align-items:center;gap:.4rem;padding:.35rem .7rem;font-size:.7rem;display:inline-flex;position:absolute;top:.75rem;right:.75rem}.prose pre:hover button.copy-btn,.prose pre:focus-within button.copy-btn{opacity:1}.prose pre button.copy-btn:hover{color:var(--color-text);border-color:var(--tint-20)}.prose pre button.copy-btn[data-copied=true]{color:var(--color-text);border-color:rgba(var(--accent), .4);opacity:1}@media (width<=768px){.prose pre button.copy-btn{opacity:1}}}@layer animations{@media (width>=769px) and (prefers-reduced-motion:no-preference){.prose p{animation:fade-in var(--duration-slow) var(--ease-spring) both;animation-delay:var(--anim-delay,calc(var(--stagger) * 4))}.prose li{animation:fade-left .5s var(--ease-spring) both;animation-delay:var(--anim-delay,calc(var(--stagger) * 5));&:first-child{--anim-delay:calc(var(--stagger) * 5)}&:nth-child(2){--anim-delay:calc(var(--stagger) * 5.5)}&:nth-child(3){--anim-delay:calc(var(--stagger) * 6)}&:nth-child(4){--anim-delay:calc(var(--stagger) * 6.5)}&:nth-child(5){--anim-delay:calc(var(--stagger) * 7)}&:nth-child(n+6){--anim-delay:calc(var(--stagger) * 7.5)}}.table-wrapper{animation:scale-in .5s var(--ease-spring) both;animation-delay:calc(var(--stagger) * 6)}pre{--ty:30px;animation:fade-in var(--duration-slow) var(--ease-spring) both;animation-delay:calc(var(--stagger) * 5)}}}