/* Sheetzer landing result-only tracing carousel — 2026-08-24 */
.sheetzer-workbench-hero .hero-workbench-grid > .hero-preview-shell[data-sz-style-picker-replaced="true"]{display:none!important}
.sheetzer-workbench-hero .hero-workbench-grid{grid-template-columns:minmax(480px,.83fr) minmax(640px,1.17fr);align-items:center;gap:clamp(24px,2.3vw,42px)}

.sz-landing-style-picker{
  --sz-card-width:clamp(148px,11vw,174px);
  position:relative;
  min-width:0;
  max-width:100%;
  padding:clamp(22px,2vw,30px);
  overflow:hidden;
  border:1px solid var(--hero-border,rgba(255,255,255,.14));
  border-radius:24px;
  color:var(--text);
  background:
    radial-gradient(circle at 92% 3%,color-mix(in srgb,var(--accent) 19%,transparent) 0%,transparent 42%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--surface-2) 80%,transparent));
  box-shadow:var(--hero-shadow,0 30px 86px rgba(0,0,0,.46)),inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  isolation:isolate;
}
.sz-landing-style-picker:before{content:"";position:absolute;z-index:-1;right:-18%;top:-34%;width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%);filter:blur(26px);pointer-events:none}

.sz-trace-picker-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px;margin:0 3px clamp(22px,2.1vw,30px)}
.sz-trace-picker-heading{min-width:0}
.sz-trace-picker-kicker{margin:0 0 8px;color:var(--accent);font-family:"IBM Plex Mono",monospace;font-size:10px!important;font-weight:700!important;letter-spacing:.105em;line-height:1.3;text-transform:uppercase}
.sz-trace-picker-header h2{margin:0;color:var(--text);font-size:clamp(25px,2vw,32px);font-weight:800;letter-spacing:-.05em;line-height:1.06}
.sz-trace-picker-support{max-width:560px;margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.sz-trace-auto-badge{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--hero-border,rgba(255,255,255,.14)) 88%,transparent);border-radius:10px;background:color-mix(in srgb,var(--surface) 56%,transparent);color:var(--text);font-size:10px;font-weight:750;white-space:nowrap;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent)}
.sz-trace-auto-badge svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sz-trace-auto-badge.is-paused{color:var(--muted)}

.sz-trace-carousel-shell{position:relative;min-width:0}
.sz-trace-carousel{display:flex;gap:12px;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;padding:4px 4px 15px;scroll-snap-type:x mandatory;scroll-padding-inline:4px;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x pan-y;cursor:grab;outline:none}
.sz-trace-carousel::-webkit-scrollbar{display:none}
.sz-landing-style-picker.is-dragging .sz-trace-carousel{cursor:grabbing;scroll-snap-type:none;user-select:none}
.sz-trace-result-card{appearance:none;position:relative;flex:0 0 var(--sz-card-width);width:var(--sz-card-width);min-width:0;display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--hero-border,rgba(255,255,255,.14)) 84%,transparent);border-radius:15px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 72%,transparent),color-mix(in srgb,var(--surface-2) 84%,transparent));color:var(--text);text-align:left;font:inherit;cursor:pointer;scroll-snap-align:center;box-shadow:0 12px 30px rgb(0 0 0 / 11%),inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;background .2s ease}
.sz-trace-result-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 42%,var(--hero-border,rgba(255,255,255,.14)));box-shadow:0 18px 38px rgb(0 0 0 / 16%),inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent)}
.sz-trace-result-card.is-active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 75%,transparent),0 0 27px color-mix(in srgb,var(--accent) 22%,transparent),0 20px 46px rgb(0 0 0 / 20%)}
.sz-trace-result-card:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 78%,white);outline-offset:2px}
.sz-trace-result-media{display:block;width:100%;aspect-ratio:4/5.05;overflow:hidden;background:#fff;border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent)}
.sz-trace-result-media img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;background:#fff;user-select:none;-webkit-user-drag:none}
.sz-trace-result-copy{display:grid;gap:8px;min-height:105px;padding:13px 12px 14px;align-content:start}
.sz-trace-result-title{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;min-width:0}
.sz-trace-method-icon{display:grid;width:24px;height:24px;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 62%,transparent);border-radius:7px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent)}
.sz-trace-method-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.sz-trace-result-title strong{display:block;min-width:0;overflow:hidden;color:var(--text);font-size:12px;font-weight:800;letter-spacing:-.025em;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.sz-trace-result-copy small{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:9.5px;line-height:1.45;-webkit-line-clamp:3;-webkit-box-orient:vertical}

.sz-trace-prev,.sz-trace-next{position:absolute;z-index:5;top:45%;display:grid;width:48px;height:48px;place-items:center;padding:0;border:1px solid color-mix(in srgb,var(--hero-border,rgba(255,255,255,.14)) 96%,transparent);border-radius:50%;background:color-mix(in srgb,var(--hero-panel-strong,var(--surface)) 90%,transparent);color:var(--accent);box-shadow:0 13px 34px rgb(0 0 0 / 28%),inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent);cursor:pointer;transform:translateY(-50%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.sz-trace-prev{left:5px}
.sz-trace-next{right:5px}
.sz-trace-prev:hover,.sz-trace-next:hover{transform:translateY(-50%) scale(1.04);border-color:color-mix(in srgb,var(--accent) 56%,var(--hero-border,rgba(255,255,255,.14)));background:color-mix(in srgb,var(--accent) 7%,var(--hero-panel-strong,var(--surface)))}
.sz-trace-prev:focus-visible,.sz-trace-next:focus-visible,.sz-trace-play:focus-visible,.sz-trace-dot:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 72%,white);outline-offset:3px}
.sz-trace-prev svg,.sz-trace-next svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sz-trace-controls{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:16px;margin:12px 5px 0}
.sz-trace-play{display:grid;width:46px;height:46px;place-items:center;padding:0;border:1px solid color-mix(in srgb,var(--hero-border,rgba(255,255,255,.14)) 88%,transparent);border-radius:50%;background:color-mix(in srgb,var(--surface) 52%,transparent);color:var(--accent);cursor:pointer;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent)}
.sz-trace-play:disabled{cursor:default;opacity:.55}
.sz-trace-play-icon,.sz-trace-play-icon svg{display:block;width:19px;height:19px}
.sz-trace-play-icon svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sz-trace-progress{position:relative;height:4px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--line-strong) 45%,transparent)}
.sz-trace-progress>span{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 44%,transparent)}
.sz-trace-progress>span.is-cycling{animation:sz-trace-progress 4.2s linear forwards}
.sz-trace-progress>span.is-paused{animation-play-state:paused}
@keyframes sz-trace-progress{from{width:0}to{width:100%}}
.sz-trace-dots{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:max-content}
.sz-trace-dot{appearance:none;width:7px;height:7px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--muted) 58%,transparent);cursor:pointer;transition:width .18s ease,background .18s ease,transform .18s ease}
.sz-trace-dot:hover{transform:scale(1.18);background:color-mix(in srgb,var(--accent) 65%,var(--muted))}
.sz-trace-dot.is-active{width:20px;background:var(--accent)}
.sz-trace-picker-footer{margin:13px 5px 0;color:color-mix(in srgb,var(--muted) 88%,transparent);font-size:9.5px;line-height:1.4}

:root[data-theme="light"] .sz-trace-result-card,
:root[data-theme="system"] .sz-trace-result-card{box-shadow:0 12px 28px rgb(37 28 20 / 8%),inset 0 1px 0 rgb(255 255 255 / 60%)}
:root[data-theme="light"] .sz-trace-result-card.is-active{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),0 0 23px color-mix(in srgb,var(--accent) 15%,transparent),0 18px 40px rgb(37 28 20 / 12%)}

@media (max-width:1260px){
  .sheetzer-workbench-hero .hero-workbench-grid{grid-template-columns:1fr;gap:36px}
  .sz-landing-style-picker{--sz-card-width:clamp(240px,31vw,320px);width:min(1040px,100%)}
  .sz-trace-result-copy{min-height:96px}
  .sz-trace-result-title strong{font-size:13px}
  .sz-trace-result-copy small{font-size:10px}
}

@media (max-width:820px){
  .sz-landing-style-picker{--sz-card-width:clamp(205px,37vw,252px);padding:20px 18px;border-radius:20px}
  .sz-trace-picker-header{margin-bottom:20px}
  .sz-trace-picker-header h2{font-size:28px}
  .sz-trace-auto-badge{min-height:36px;padding-inline:10px}
  .sz-trace-prev,.sz-trace-next{width:46px;height:46px}
  .sz-trace-controls{gap:13px}
  .sz-trace-dots{gap:7px}
}

@media (max-width:620px){
  .sheetzer-workbench-hero .hero-workbench-grid{gap:30px}
  .sz-landing-style-picker{--sz-card-width:min(76vw,310px);width:100%;padding:18px 14px 16px;border-radius:18px}
  .sz-trace-picker-header{grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0 2px 17px}
  .sz-trace-picker-kicker{grid-column:1/-1;margin-bottom:5px;font-size:9px!important}
  .sz-trace-picker-heading{display:contents}
  .sz-trace-picker-header h2{grid-column:1/-1;font-size:26px;line-height:1.08}
  .sz-trace-picker-support{grid-column:1/-1;margin-top:0;font-size:11px;line-height:1.48}
  .sz-trace-auto-badge{grid-column:2;grid-row:1;align-self:start;min-height:32px;padding:0 9px;font-size:9px}
  .sz-trace-auto-badge svg{width:15px;height:15px}
  .sz-trace-carousel{gap:10px;padding:3px 3px 12px}
  .sz-trace-result-card{border-radius:14px}
  .sz-trace-result-copy{min-height:91px;padding:12px 11px 13px;gap:7px}
  .sz-trace-result-title{grid-template-columns:23px minmax(0,1fr);gap:7px}
  .sz-trace-method-icon{width:23px;height:23px}
  .sz-trace-result-title strong{font-size:12.5px}
  .sz-trace-result-copy small{font-size:9.5px;-webkit-line-clamp:2}
  .sz-trace-prev,.sz-trace-next{top:44%;width:44px;height:44px}
  .sz-trace-prev{left:3px}
  .sz-trace-next{right:3px}
  .sz-trace-controls{grid-template-columns:auto minmax(0,1fr);gap:12px;margin:10px 4px 0}
  .sz-trace-play{width:44px;height:44px}
  .sz-trace-dots{grid-column:1/-1;justify-content:center;gap:8px;min-width:0;padding:1px 0}
  .sz-trace-dot{width:6px;height:6px}
  .sz-trace-dot.is-active{width:18px}
  .sz-trace-picker-footer{text-align:center;margin-top:10px;font-size:9px}
}

@media (max-width:380px){
  .sz-landing-style-picker{--sz-card-width:74vw;padding-inline:12px}
  .sz-trace-picker-header h2{font-size:24px}
  .sz-trace-auto-badge span{display:none}
  .sz-trace-auto-badge{width:32px;justify-content:center;padding:0}
  .sz-trace-dots{gap:7px}
}

@media (prefers-reduced-motion:reduce){
  .sz-trace-result-card,.sz-trace-prev,.sz-trace-next,.sz-trace-dot{transition:none!important}
  .sz-trace-carousel{scroll-behavior:auto!important}
  .sz-trace-progress>span{animation:none!important;width:0!important}
}