:root{--tf-accent: #3b82f6;--tf-accent-2: #8b5cf6;--tf-line: rgba(127, 127, 127, .22);--tf-soft: rgba(127, 127, 127, .07);--tf-muted: rgba(127, 127, 127, .95)}.tf-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start;gap:1.25rem;margin-top:2rem}@media(max-width:52rem){.tf-layout{grid-template-columns:minmax(0,1fr)}}.tf-side{display:grid;gap:1.25rem}.tf-card{margin:0;border:1px solid var(--tf-line);border-radius:1rem;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--tf-accent) 12%,transparent),transparent 50%),var(--tf-soft);padding:1.25rem 1.5rem}.tf-bar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;& h2{margin:0;font-size:1.1rem}}.tf-raw{font-size:.8rem;text-decoration:none;color:var(--tf-muted);&:hover{color:var(--tf-accent)}}.tf-products{transition:opacity .3s;&.htmx-added{opacity:0}}.tf-stage{position:relative;min-height:12rem}.tf-spinner{position:absolute;inset:50% auto auto 50%;width:2rem;height:2rem;margin:-1rem 0 0 -1rem;border:3px solid var(--tf-line);border-top-color:var(--tf-accent);border-radius:50%;opacity:0;animation:tf-spin .8s linear infinite;transition:opacity .2s}.htmx-request .tf-spinner{opacity:1}.htmx-request .tf-product{opacity:.35;filter:blur(2px)}.tf-product{display:grid;grid-template-columns:160px 1fr;align-items:start;gap:1.25rem;margin:0;transition:opacity .2s,filter .2s;& img{width:160px;height:160px;border-radius:.75rem;background:#fff;box-shadow:0 .5rem 1.5rem #07080c4d}& h3{margin:0 0 .25rem;font-size:1.15rem}& p{margin:.5rem 0 0;color:var(--tf-muted);font-size:.9rem}@media(max-width:32rem){grid-template-columns:1fr;justify-items:center;text-align:center}}.tf-price{display:inline-block;padding:.15rem .6rem;border-radius:999px;background:linear-gradient(120deg,var(--tf-accent),var(--tf-accent-2));color:#fff;font-size:1rem}.tf-empty{color:var(--tf-muted);font-style:italic}.tf-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin-top:1.25rem;& button{display:grid;place-items:center;width:2.1rem;height:2.1rem;margin:0;padding:0;border:1px solid var(--tf-line);border-radius:50%;background:transparent;color:inherit;font-size:.85rem;font-variant-numeric:tabular-nums;line-height:1;&:hover:not(:disabled){border-color:var(--tf-accent)}&.current{border-color:transparent;background:linear-gradient(120deg,var(--tf-accent),var(--tf-accent-2));color:#fff;font-weight:700}}}.tf-time{text-align:center;& output{display:flex;justify-content:center;gap:.2rem;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}& b{display:grid;place-items:center;width:1.9rem;height:2.6rem;border-radius:.4rem;background:color-mix(in srgb,var(--tf-accent) 18%,transparent);color:var(--tf-accent);font-size:1.6rem}& b:last-child{animation:tf-flip .4s ease-out}& i{align-self:center;color:var(--tf-muted);font-style:normal;font-size:1.4rem}& small{display:block;margin-top:.6rem;color:var(--tf-muted)}}.tf-log ol{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}.tf-log li{display:flex;justify-content:space-between;gap:.5rem;margin:0;padding:.4rem .6rem;border-left:3px solid var(--tf-accent-2);border-radius:.4rem;background:var(--tf-soft);font-size:.8rem;animation:tf-in .3s ease-out;&.product{border-left-color:var(--tf-accent)}& code{padding:0;background:none;font-size:.8rem}& span{color:var(--tf-muted);white-space:nowrap;font-variant-numeric:tabular-nums}&.tf-log-empty{border:0;color:var(--tf-muted)}}.tf-pulse{width:.6rem;height:.6rem;border-radius:50%;background:#22c55e;box-shadow:0 0 #22c55e99;animation:tf-pulse 1.6s infinite}@keyframes tf-spin{to{transform:rotate(360deg)}}@keyframes tf-flip{0%{transform:rotateX(90deg)}}@keyframes tf-in{0%{transform:translate(-.5rem);opacity:0}}@keyframes tf-pulse{70%{box-shadow:0 0 0 .5rem #22c55e00}to{box-shadow:0 0 #22c55e00}}@media(prefers-reduced-motion:reduce){.tf-time b:last-child,.tf-log li,.tf-pulse{animation:none}}