.hbop{--hl-accent:var(--primary);--hl-muted:var(--muted-foreground);--hl-line:var(--border);--hl-panel:var(--card);margin-top:2.5rem;scroll-margin-top:6rem}.hbop .hl-studio{border:1px solid var(--hl-line);background:var(--hl-panel);border-radius:22px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;padding:24px;display:grid}.hbop .hl-controls{flex-direction:column;gap:18px;min-width:0;display:flex}.hbop .bh-panel-title{letter-spacing:-.01em;font-size:22px;font-weight:650}.hbop .hl-field{flex-direction:column;gap:10px;display:flex}.hbop .bh-step,.hbop .hl-slot-label{font-size:15px;font-weight:650}.hbop .hl-slots{grid-template-columns:1fr 1fr;gap:14px;display:grid}.hbop .hl-slot{min-width:0;position:relative}.hbop .hl-slot-label{margin-bottom:8px}.hbop .hl-slot-drop{aspect-ratio:1;border:1px dashed var(--border);background:var(--muted);cursor:pointer;border-radius:14px;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.hbop .hl-slot-drop:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.hbop .hl-slot[data-drag=true] .hl-slot-drop{border-color:var(--primary)}.hbop .hl-slot-drop img{object-fit:contain;width:100%;height:100%}.hbop .hl-slot-empty{color:var(--hl-muted);flex-direction:column;align-items:center;gap:8px;padding:12px;font-size:13px;display:flex}.hbop .hl-slot-empty svg{width:30px;height:30px}.hbop .hl-slot-hint{color:var(--hl-muted);margin-top:8px;font-size:12px;line-height:1.5}.hbop .hl-slot-actions{justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;display:flex}.hbop .hl-slot-actions button{cursor:pointer;align-items:center;gap:4px;display:flex}.hbop .hl-slot-actions svg{width:12px;height:12px}.hbop .hl-chips{flex-wrap:wrap;gap:8px;display:flex}.hbop .hl-chips button{border:1px solid var(--border);cursor:pointer;border-radius:9px;padding:9px 12px;font-size:13px}.hbop .hl-chips button[aria-checked=true]{border-color:var(--primary);background:color-mix(in oklab, var(--primary) 10%, transparent);color:var(--foreground)}.hbop .hbop-three{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.hbop .hbop-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.hbop .hbop-cards button{text-align:center;border:1px solid var(--border);cursor:pointer;border-radius:12px;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:6px 6px 8px;display:flex}.hbop .hbop-cards img{object-fit:cover;background:var(--muted);border-radius:8px;width:100%;height:72px}.hbop .hbop-cards button[aria-checked=true]{border-color:var(--primary);background:color-mix(in oklab, var(--primary) 10%, transparent)}.hbop .hbop-cards strong{overflow-wrap:normal;word-break:keep-all;font-size:13px;line-height:1.3}.hbop .hl-model-trigger{width:100%;height:auto;min-height:60px;padding:12px}.hbop .hl-model-name{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.hbop .hl-model-badge{color:var(--primary);font-size:10px;font-weight:500}.hbop .hl-help,.hbop .hl-specs,.hbop .bh-notes,.hbop .bh-note{color:var(--hl-muted);font-size:13px;line-height:1.5}.hbop .bh-consent{cursor:pointer;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;display:flex}.hbop .bh-consent input{width:18px;height:18px;accent-color:var(--primary);flex-shrink:0;margin-top:4px}.hbop .bh-generate{white-space:normal;height:auto;min-height:52px;padding:12px;font-size:16px}.hbop .bh-notes{flex-direction:column;gap:10px;display:flex}.hbop .bh-private{align-items:flex-start;gap:8px;display:flex}.hbop .bh-private svg{flex:none;width:16px;height:16px;margin-top:2px}.hbop .hl-stage{flex-direction:column;justify-content:center;align-items:center;gap:18px;min-width:0;display:flex}.hbop .hl-reference-stage{width:100%}.hbop .hl-result{flex-direction:column;align-items:center;gap:16px;width:100%;display:flex}.hbop .hbop-media video{aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:16px;width:100%}.hbop .hbop-media video[data-vertical]{aspect-ratio:9/16;width:auto;max-width:100%;max-height:72vh}.hbop .hl-result figcaption{text-align:center;line-height:1.6}.hbop .hl-result-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px;display:flex}.hbop .hl-progress{text-align:center;flex-direction:column;align-items:center;gap:16px;width:100%;padding:36px 12px;display:flex}.hbop .hl-progress>svg{width:28px;height:28px}.hbop .hl-bar{background:var(--muted);border-radius:99px;width:100%;height:6px;overflow:hidden}.hbop .hl-bar span{background:var(--primary);height:100%;transition:width 1s;display:block}.hbop .hl-percent{font-size:13px}.hbop .hl-text-link{text-underline-offset:3px;color:var(--hl-muted);font-size:13px;text-decoration:underline}.hbop .hl-error{background:var(--muted);border-radius:10px;gap:8px;margin-bottom:16px;padding:12px;font-size:14px;display:flex}.hbop .hl-error svg{flex-shrink:0;width:18px}@media (width<=900px){.hbop .hl-studio{grid-template-columns:1fr}}@media (width<=520px){.hbop .hbop-cards img{height:56px}.hbop .hl-slot-drop{aspect-ratio:4/3}}@media (width<=360px){.hbop .hl-slot-drop{aspect-ratio:3/2}.hbop .hl-studio{gap:24px;padding:16px}.hbop .hl-slots{gap:10px}.hbop .bh-panel-title{font-size:20px}}.hl-model-option{align-items:center;gap:10px;min-width:0;display:flex}.hl-model-option small{color:var(--muted-foreground);font-size:12px;display:block}.hl-model-option .hl-model-name{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.hl-model-option .hl-model-badge{color:var(--primary);font-size:10px}