The Style tool is the part of Quey most people open first and understand least. It looks like three tabs — Frame, Font, Color — sitting under a selected element. What's easy to miss is that selection itself has more depth than a single click, and the panel leans on the page overlay instead of a layers list to keep you oriented. This is a walkthrough of how all of it actually works, including the parts that don't advertise themselves.

Select has two modes, and a modifier that flips them

Every click resolves through one setting: deep select, on by default. With it on, a click picks the exact element under your cursor — the <span>, not the <div> wrapping it. With it off, a click picks the element's nearest layout container instead, which is often what you actually want on a densely nested page where every pixel has three ancestors.

Whichever mode you're in, holding Cmd/Ctrl while you click inverts it for that one click. Deep select on, holding Cmd gets you the container; deep select off, holding Cmd drills straight to the leaf. You don't have to open settings to switch approaches mid-session.

Drilling in: container → child → text, as one gesture

Double-clicking a selected element steps one level deeper toward whatever's actually under your pointer, not straight to the bottom. Select a card, double-click the heading inside it, and you get the heading's wrapper — double-click again and you get the heading itself. Each double-click descends exactly one level, and Quey remembers where you are: further double-clicks keep going deeper into that subtree instead of snapping back out to the container you started from.

Only once your selection is the deepest element under the cursor does a double-click switch behavior and start inline text editing. That's deliberate — it means “select container, select child, edit text” reads as one continuous gesture instead of three different interactions you have to remember separately. Click anywhere outside the subtree you've drilled into and the drill resets.

Lasso: select more than one thing at once

Click-drag on empty canvas (past a small threshold, so it doesn't fire on an accidental jitter) and you get a marquee instead of a single selection. Everything whose bounding box intersects the lasso rectangle becomes selectable, sorted smallest-to-largest so the most specific element — not the section wrapping it — is treated as primary.

Context: building a multi-element brief for the agent

This is the one that isn't obvious from the UI alone. Once you have something selected and you're in the Agent or Comment tool, clicking a different element doesn't replace your selection — it adds that element as supporting context. Each one shows up as a numbered box on the page (capped at 8; past that, the overlay collapses the overflow into a +N badge). Click a context element again to remove it.

This is how you hand an agent something wider than “fix this button”: select the button, then Cmd-nothing-required-click the card it's in, the price label next to it, and the section heading above it — four numbered boxes, one prompt, and the agent gets all four as structured context instead of receiving four sequential, disconnected messages.

Sibling sync: edit one, edit the pattern

Select an element that shares its parent, tag, and exact class list with other elements — a card in a grid, a row in a list — and Quey detects the match automatically. Style edits you make apply to every matched sibling at once, not just the one you clicked, and the matches are drawn on the overlay in a dedicated purple so you can see exactly which elements are about to change before you commit anything. There's no dialog to confirm this; the moment you select a repeated element, sync is already active for that session.

There's no layers panel — the overlay is the layers panel

If you're looking for a tree view of the DOM, there isn't one; the page itself is the tree, and the overlay encodes your position in it with color instead of indentation. It's one accent color at fixed opacity steps, not a rainbow of meanings to memorize:

• Solid box, full opacity — your current selection
• Lighter, no halo — whatever you're hovering
• Dotted outline — the selected element's parent, so you always know what you'd get by selecting outward
• Numbered boxes at 0.8 opacity — agent/comment context elements (see above)
• Dashed at low opacity — elements you've already edited this session, so you can see your trail without a history panel
• Purple — matched siblings that will receive the same edit (sibling sync, above)
• Pink dashed guides — smart alignment guides when you're dragging or resizing something into line with a neighbor

Once these read at a glance, “where am I in the tree” stops being a question you need a separate panel to answer.

Frame: position, size, radius

Frame drives the element's transform and box model directly: width, height, and rotation angle on one row; X, Y, and horizontal/vertical flip on the next. Radius lives in its own collapsible section — one value for all four corners by default, with a toggle to break it into independent top-left/top-right/bottom-right/bottom-left inputs when a card or modal actually needs it. Padding and gap use a scrub field: drag anywhere on the control to change the value, or click the number to type one directly — built for values that don't have a natural min/max the way opacity or radius do.

Font: reads from what's already on the page

The family dropdown isn't backed by a font library — it's populated from the fonts actually detected in use on the current page (deduplicated, with the element's current family listed first). Pick a different one and you're switching to something the page has already loaded, which is why it always applies instantly with no flash of unstyled text. Size, weight, style, and line-height sit alongside it; paint properties (color, when the element is text) are shared with the Color tab rather than duplicated.

Color: tokens first, then picker, swatches, or gradient

Every non-transparent color currently applied to the selected element — background, border, text — surfaces as a quick-access swatch grid at the top of Frame, labeled by property. Click one and it jumps straight into the Color tab focused on that property.

The Color tab itself has three views: Picker (direct HSB/hex editing), Swatches, and Gradient, which supports adding and removing stops for linear and radial gradients. If the underlying value is a CSS custom property — a design token — Quey carries that token name through rather than flattening it to a raw hex value, so a color edit stays traceable back to wherever the token is actually defined instead of silently forking into a one-off value.

Tips, collected

• Toggle deep select in settings if you're fighting the panel for the wrong element more often than not — most component-heavy pages are easier with it off.
• Hold Cmd/Ctrl for a one-off flip instead of changing the setting, when you just need the other mode for a single click.
• Double-click to drill instead of hunting for the exact pixel — one double-click per level, and it self-limits into text editing once you're at the bottom.
• Lasso-select when you want a batch, not a single element — the smallest element under the marquee becomes primary automatically.
• Build agent context by clicking around after your first selection while in Agent or Comment mode — you don't need to hold a modifier, just don't be in Select/Style mode.
• Trust sibling sync on repeated components; the purple highlight tells you exactly what's about to change before you touch a single value.
• Watch the parent's dotted outline before you click outward — the overlay is preview-only (nothing on it is clickable), but it tells you exactly what you're about to select so a Cmd-held or deep-select-off click doesn't surprise you.