/* The hero's 3D canvas bleeds a few px past the viewport; never let the page scroll sideways. */
html,body{overflow-x:clip}

/* ── CARROSSEL das estampas: barra de progresso sob a estampa da vez ─────── */
.presets .preset{position:relative}
.presets .preset.selected::after{content:'';position:absolute;left:10%;right:10%;bottom:-7px;height:2px;border-radius:2px;background:var(--red);transform-origin:left;transform:scaleX(0)}
.presets.girando .preset.selected::after{animation:carrossel var(--carrossel,15s) linear forwards}
.presets.pausado .preset.selected::after{opacity:.25;transform:scaleX(1)}
@keyframes carrossel{to{transform:scaleX(1)}}

/* ── HALFTONE (motor real) ───────────────────────────────────────────────── */
/* Checkerboard like the app's editor: the retícula is made of transparent holes, invisible on black. */
.ht .ht-stage{position:relative;aspect-ratio:1.05;background:#fff repeating-conic-gradient(#d9d6d0 0 25%,#fff 0 50%) 0 0/16px 16px;overflow:hidden;touch-action:none;cursor:grab;user-select:none}
.ht .ht-stage.peca{background:#141514}
.ht-seg .s-xadrez{width:12px;height:12px;background:#fff repeating-conic-gradient(#999 0 25%,#fff 0 50%) 0 0/6px 6px;border-radius:2px}
.ht-seg .s-peca{width:12px;height:12px;background:#141514;border:1px solid #ffffff55;border-radius:2px}
.ht .ht-stage:active{cursor:grabbing}
.ht-layer{position:absolute;transform-origin:50% 50%;will-change:transform}
.ht-layer canvas{position:absolute;inset:0;width:100%;height:100%}
.ht-layer.pixel #htResult{image-rendering:pixelated}   /* dots stay crisp; the original stays smooth */
.ht-roi{position:absolute;pointer-events:none}
.ht-roi[hidden]{display:none}
.ht-line{position:absolute;top:0;height:100%;border-left:1px solid #ffffffa6;pointer-events:none}
.ht-line b{position:absolute;top:50%;left:-14px;border-radius:50%;background:var(--paper);color:var(--ink);width:28px;height:28px;text-align:center;padding-top:3px}
.ht .original-label,.ht .halftone-label{pointer-events:none}
.ht-status{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#101210e6;color:#e6e7dc;font-size:12px;padding:7px 12px;border-radius:999px;white-space:nowrap;pointer-events:none}
.ht-zoom{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:4px;background:#101210d9;border:1px solid #ffffff1f;border-radius:8px;padding:4px}
.ht-zoom button{width:30px;height:30px;border:0;border-radius:6px;background:#ffffff14;color:#e6e7dc;font-size:16px;cursor:pointer}
.ht-zoom button:hover{background:#ffffff26}
.ht-zoom b{min-width:48px;text-align:center;font:600 12px Manrope,sans-serif;color:#e6e7dc}
.ht-controls{padding:18px 20px 8px;display:grid;gap:14px}
.ht-row{display:grid;gap:8px;font-size:12px;color:#b3b7aa}
.ht-row>span{display:flex;justify-content:space-between;gap:10px}
.ht-row em{font-style:normal;color:#e6e7dc}
.ht-seg{display:flex;flex-wrap:wrap;gap:6px}
.ht-seg button{display:inline-flex;align-items:center;gap:7px;border:1px solid #ffffff22;background:transparent;color:#d9dbd0;border-radius:7px;padding:8px 11px;font-size:12px;cursor:pointer}
.ht-seg button:hover{border-color:#ffffff55}
.ht-seg button[aria-pressed="true"]{border-color:var(--red);background:#ff253e1f;color:#fff}
.ht-seg i{display:inline-block;background:currentColor;font-style:normal}
.ht-seg .s-circle{width:10px;height:10px;border-radius:50%}
.ht-seg .s-square{width:9px;height:9px}
.ht-seg .s-diamond{width:8px;height:8px;transform:rotate(45deg)}
.ht-seg .s-line{width:14px;height:3px;border-radius:2px}
.ht-seg .s-spiral{background:none;font-size:13px;line-height:1}
.ht .demo-note{padding:6px 20px 18px}

/* ── SOBRA (bancada real) ────────────────────────────────────────────────── */
.sobra-section .split-heading{margin-bottom:30px}
.sobra-demo{
  /* the app's light theme tokens, scoped to the bench */
  --surface:#FFFFFF;--surface-2:#F3F1EC;--surface-3:#ECE9E2;
  --text:#16140F;--text-muted:#6B675E;--text-faint:#A7A299;
  --border:rgba(22,20,15,.09);--border-strong:rgba(22,20,15,.16);
  --brand:linear-gradient(135deg,#ED1C2E 0%,#FF6A00 100%);--brand-1:#ED1C2E;--brand-2:#FF6A00;--brand-ink:#fff;
  --font-body:"DM Sans",system-ui,sans-serif;--font-display:Manrope,system-ui,sans-serif;--font-mono:ui-monospace,"JetBrains Mono",monospace;
  --r-md:14px;--r-lg:20px;--r-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,16,8,.05);--shadow-md:0 1px 2px rgba(20,16,8,.05),0 10px 30px rgba(20,16,8,.07);
  border:1px solid #cecec3;border-radius:12px;overflow:hidden;background:var(--surface-2);box-shadow:0 25px 45px #28271e1a
}
.sobra-demo .sobra-root{height:680px;font-size:14px}
.sobra-demo #sbEnviar{display:none}   /* sending to the account's storage needs the app */
.sobra-benefits{display:flex;flex-wrap:wrap;gap:0 32px;margin:22px 0 6px}
.sobra-benefits li{border-bottom:0;padding:8px 0}
@media(max-width:760px){.sobra-demo .sobra-root{height:620px}.sobra-benefits{display:block}}