/* Hosted pilot additions. Loads after the studio's stylesheets; every rule is scoped with hp- so the studio's
   shell, typography, buttons, fields and chat stay exactly as they are in the local app. */

/* Look: Graphite + Aurora. Slow orange, cyan and violet light sits behind the page; navigation (rail, header,
   sidebar cards, menus) is frosted glass over it, and the work itself (cards, editors, composer) stays on solid
   graphite so it reads crisply. Hosted only: the studio's shared stylesheets are untouched. */
:root[data-theme="dark"]{--bg:#0a0c10;--panel:#14171c;--raised:#1d2128;--line:#2a2f38;--text:#eef1f5;--muted:#a9b1bc;
 --popover-bg:#171b21;--popover-line:#343a45;--glass:rgba(20,23,29,.62);--glass-line:color-mix(in srgb,var(--text) 10%,transparent);
 --hp-glass:rgba(16,19,25,.5);--hp-glass-strong:rgba(18,21,27,.86);--hp-glass-line:color-mix(in srgb,var(--text) 10%,transparent);
 --hp-glass-edge:inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent);--hp-blur:blur(26px) saturate(1.5)}
html[data-theme="dark"]{background:var(--bg)}
html body,html body.hp-bare{background:transparent}
.hp-aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
 background:radial-gradient(1px 1px at 1px 1px,color-mix(in srgb,var(--text) 3.5%,transparent) 1px,transparent 0) 0 0/24px 24px}
.hp-aurora i{position:absolute;border-radius:50%;will-change:transform;animation:hp-drift 34s ease-in-out infinite alternate}
.hp-aurora i:nth-child(1){width:72vmax;height:72vmax;left:-24vmax;top:-32vmax;opacity:.48;background:radial-gradient(circle,#ff8a1f 0,rgba(255,138,31,.32) 28%,rgba(255,138,31,0) 62%)}
.hp-aurora i:nth-child(2){width:66vmax;height:66vmax;right:-28vmax;top:6vh;opacity:.5;animation-duration:42s;background:radial-gradient(circle,#35d6f5 0,rgba(53,214,245,.28) 28%,rgba(53,214,245,0) 62%)}
.hp-aurora i:nth-child(3){width:60vmax;height:60vmax;left:20vw;bottom:-42vmax;opacity:.4;animation-duration:50s;background:radial-gradient(circle,#6a4bff 0,rgba(106,75,255,.28) 30%,rgba(106,75,255,0) 62%)}
@keyframes hp-drift{to{transform:translate3d(6vw,4vh,0) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.hp-aurora i{animation:none}}
html body>header{background:var(--hp-glass)!important;-webkit-backdrop-filter:var(--hp-blur)!important;backdrop-filter:var(--hp-blur)!important;border-color:var(--hp-glass-line)!important;box-shadow:var(--hp-glass-edge),0 18px 40px rgba(0,0,0,.22)!important}
html .studio-rail,html .ws-sidebar .ws-card,html .ws-context,html .ws-drawer-toggle{background:var(--hp-glass);-webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);border-color:var(--hp-glass-line);box-shadow:var(--hp-glass-edge)}
html :is(.rail-new-menu,.client-quick-menu,.profile-panel,.menu-popover,.hp-toast){background:var(--hp-glass-strong);-webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);border-color:var(--hp-glass-line)}
html .workspace-switch select{background:color-mix(in srgb,var(--text) 6%,transparent);border-color:var(--hp-glass-line)}
html body::after{background:linear-gradient(to bottom,rgba(10,12,16,.5),rgba(10,12,16,0))}
html .assist-composer{box-shadow:0 14px 34px rgba(0,0,0,.32)!important}
@media (prefers-reduced-transparency:reduce){html :is(body>header,.studio-rail,.ws-sidebar .ws-card,.ws-context){background:var(--panel)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* Sign-in and no-access screens (no shell) */
body.hp-bare::after{display:none}
.hp-signin{flex:1;overflow-y:auto;display:grid;align-content:center;padding:48px 20px}
.hp-signin-inner{width:100%;max-width:440px;margin:0 auto;display:grid;gap:26px}
.hp-signin-inner h1{font-size:clamp(28px,3vw,36px);letter-spacing:-.035em;line-height:1.1;margin:0 0 10px}
.hp-signin-form{display:grid;gap:16px}
.hp-code{font-size:24px!important;letter-spacing:.3em;font-variant-numeric:tabular-nums}

/* Shared bits */
.hp-muted{color:var(--muted)}
.hp-small{font-size:13px;margin-top:28px}
.hp-small-line{font-size:13px;margin:0}
.hp-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hp-center{justify-content:center}
.hp-notice{border-left:3px solid var(--line);padding:4px 0 4px 14px;color:var(--muted);margin:0 0 14px}
.hp-notice.is-error{border-color:var(--danger);color:var(--danger)}
.hp-crumb{margin:0 0 18px;font-size:14px}
.hp-crumb a{color:var(--muted)}
.hp-page-head{display:flex!important;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hp-section{display:grid;gap:12px;padding:28px 0 6px;border-top:1px solid var(--line);margin-top:28px}
.hp-section h2{margin:0}
.ecom-summary+.hp-section{border-top:0;margin-top:0}
.hp-filter{margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px}
.hp-toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:grid;gap:8px;z-index:95;width:min(92vw,480px)}
.hp-toast{background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;box-shadow:var(--popover-shadow)}
.hp-toast.is-error{border-color:var(--danger)}
/* The studio sizes every textarea for long prompts; pilot fields grow with their content instead. */
#brandSurface textarea{height:auto;min-height:0;max-height:60vh;field-sizing:content;resize:none}
.hp-conflict{border:1px solid var(--accent);border-radius:12px;padding:16px;display:grid;gap:12px;justify-items:start;margin:0 0 20px}

/* Chat (the studio's assist-* components, plus approval cards) */
.hp-chat-page{display:flex;flex-direction:column;min-height:calc(100dvh - var(--app-top,90px) - 120px)}
.hp-chat-page .assist-docked{flex:1}
.hp-chat-context{margin:0 0 6px;font-size:13px;color:var(--muted)}
.hp-chat-context strong{color:var(--text)}
/* Attaching an ad: the studio's round add button, its thumbnails above the text, and the analyzed ad in the thread */
.hp-attach{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;color:var(--muted);cursor:pointer;transition:background var(--motion-fast,.15s) ease,color var(--motion-fast,.15s) ease}
.hp-attach:hover{background:var(--raised);color:var(--text)}
.hp-attach:focus-within{outline:2px solid var(--focus,#0a84ff);outline-offset:2px}
.hp-attach[aria-disabled="true"]{opacity:.35;pointer-events:none}
.hp-attach svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.hp-chat-ads{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:min(82%,420px);margin-bottom:-4px}
.hp-chat-ads .assist-attachments{margin:0}
.hp-chat-ad{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;width:100%;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);text-decoration:none;transition:border-color .15s ease}
.hp-chat-ad:hover{border-color:var(--accent)}
.hp-chat-ad.is-gone{grid-template-columns:1fr;padding:10px 14px;color:var(--muted)}
.hp-chat-ad-thumb{position:relative;display:block;width:52px;aspect-ratio:9/16;border-radius:9px;overflow:hidden;background:#05070b}
.hp-chat-ad-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-chat-ad-body{display:grid;gap:3px;min-width:0}
.hp-chat-ad-body small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-chat-ad-body strong{color:var(--text);font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-chat-ad-body em{font-style:normal;font-size:12.5px;color:var(--accent)}
/* Phones: the composer bar keeps one row; Ask first shows as its icon (its name stays for screen readers) */
@media (max-width:520px){.hp-chat-page .assist-mode>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.hp-chat-page .assist-mode{padding:0 11px}}
.hp-proposal{display:grid;gap:10px;margin-top:10px;max-width:620px}
.hp-proposal h3{margin:0;font-size:17px;letter-spacing:-.01em}
.hp-proposal-kind{margin:0;font-size:12px;color:var(--accent);font-weight:600}
.hp-proposal-sub{margin:0;font-size:13px;color:var(--muted)}
.hp-proposal-facts{display:grid;gap:8px;margin:0}
.hp-proposal-facts dt{font-size:12px;color:var(--muted)}
.hp-proposal-facts dd{margin:1px 0 0;font-size:14px;line-height:1.45}
.hp-proposal-done{margin:0;font-size:14px}
/* Chat cards keep a neutral graphite edge in every state, so the only cyan on screen while media renders is the
   stage's snake glow. */
.hp-frame .assist-card,.hp-frame .hp-proposal[data-status="applied"]{border-color:#2e3237}
.hp-proposal[data-status="dismissed"]{opacity:.7}
/* Offer cards: the product photos saved from the page, as a small contact sheet under the done line */
.hp-offer-photos{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.hp-offer-photos li{width:60px;height:60px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.hp-offer-photos img{display:block;width:100%;height:100%;object-fit:contain}
/* Workspace tabs that gained something from a chat: a small accent dot until the tab is opened */
.ws-side-nav button{position:relative}
.ws-side-nav button.has-new::after{content:"";flex:none;width:7px;height:7px;margin-left:auto;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);animation:hp-fresh .32s cubic-bezier(.2,.9,.3,1.4)}
.side-collapsed .ws-side-nav button.has-new::after{position:absolute;top:6px;right:8px;margin:0}
.ws-drawer-toggle{position:relative}
.ws-drawer-toggle.has-new::after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
@keyframes hp-fresh{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ws-side-nav button.has-new::after{animation:none}}
/* Brief card: the hook leads, then the timed storyboard */
.hp-brief-hook{margin:2px 0 0;color:var(--text)!important;font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.hp-brief-beats{display:grid;gap:6px;margin:0;padding:0;list-style:none;counter-reset:beat}
.hp-brief-beats li{counter-increment:beat;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;line-height:1.45}
.hp-brief-beats li::before{content:counter(beat);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--insight) 22%,transparent);color:var(--text);font-size:12px;font-weight:600}
/* Quiet line when a card was applied and the chat carries on */
.hp-chat-event{align-self:center;display:inline-flex;align-items:center;gap:8px;margin:2px 0;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--panel) 70%,transparent);color:var(--muted);font-size:13px}
.hp-chat-event svg{width:15px;height:15px;fill:none;stroke:var(--insight);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* AI video card */
.hp-vid{display:grid;gap:12px}
.hp-vid-models{display:inline-flex;justify-self:start;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.hp-vid-models button{min-height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer}
.hp-vid-models button[aria-checked="true"]{background:var(--raised);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
/* Video models by family: a row of logo tiles, then the chosen family's versions sliding open under it. */
.hp-vpick{display:grid;gap:8px}
.hp-vfam{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:6px}
.hp-vfam button{display:grid;place-items:center;height:52px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--bg);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.hp-vfam button:hover{border-color:color-mix(in srgb,var(--text) 26%,var(--line))}
.hp-vfam button[aria-checked="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.hp-vfam button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hp-vfam-logo{display:grid;place-items:center;width:28px;height:28px}
.hp-vfam-logo img{max-width:28px;max-height:28px;object-fit:contain}
.hp-vfam-mono{font-size:17px;font-weight:750;letter-spacing:-.02em;color:var(--muted)}
.hp-vfam button[aria-checked="true"] .hp-vfam-mono{color:var(--text)}
.hp-vver{display:grid;grid-template-rows:1fr}
.hp-vver.is-sliding{animation:hp-vver-open .24s ease}
.hp-vver-in{display:grid;gap:4px;min-height:0;overflow:hidden;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.hp-vver.is-sliding .hp-vver-in{animation:hp-vver-fade .24s ease}
@keyframes hp-vver-open{from{grid-template-rows:0fr}}
@keyframes hp-vver-fade{from{opacity:0}}
.hp-vver button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:6px 12px;border:0;border-radius:10px;background:transparent;color:var(--muted);text-align:left;cursor:pointer}
.hp-vver button:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.hp-vver button[aria-checked="true"]{background:var(--raised);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.hp-vver button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hp-vver-name{display:grid;gap:1px;min-width:0}
.hp-vver-name strong{font-size:13.5px;font-weight:650;color:inherit}
.hp-vver-name small{font-size:12px;color:var(--muted)}
.hp-vver-cost{flex:none;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
p.hp-vid-sound{grid-column:1/-1;margin:0;font-size:12.5px}
@media (prefers-reduced-motion:reduce){.hp-vver.is-sliding,.hp-vver.is-sliding .hp-vver-in{animation:none}.hp-vfam button{transition:none}}
.hp-vid-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:end}
/* Length slider: label and value on one line, the model's range at the ends. The track fills orange up to the thumb. */
.hp-vid-length{display:grid;gap:2px}
.hp-vid-length-head{display:grid;grid-template-columns:1fr auto;align-items:baseline;row-gap:2px;font-size:12px;color:var(--muted)}
.hp-vid-length-head output{font-size:13px;font-weight:650;color:var(--text);font-variant-numeric:tabular-nums}
.hp-vid-length input[type=range]{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;padding:0;background:transparent;cursor:pointer}
.hp-vid-length input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--fill,0%),color-mix(in srgb,var(--text) 14%,transparent) var(--fill,0%))}
.hp-vid-length input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;border:0;background:#f4f6f8;box-shadow:0 1px 4px rgba(0,0,0,.45);transition:transform .12s ease}
.hp-vid-length input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.hp-vid-length input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:color-mix(in srgb,var(--text) 14%,transparent)}
.hp-vid-length input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
.hp-vid-length input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:0;background:#f4f6f8;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.hp-vid-length input[type=range]:focus{outline:none}
.hp-vid-length input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
.hp-vid-length input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
.hp-vid-length-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.hp-vid-length input[type=range]::-webkit-slider-thumb{transition:none}}
.hp-vid-settings label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.hp-vid-settings select{width:100%;min-height:36px}
.hp-vid-settings .hp-vid-sound{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.hp-vid-refs{display:flex;flex-wrap:wrap;gap:8px}
.hp-vid-ref{position:relative;display:grid;width:76px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg);cursor:pointer;transition:border-color .15s ease}
.hp-vid-ref input{position:absolute;opacity:0;pointer-events:none}
.hp-vid-ref img{display:block;width:100%;aspect-ratio:1;object-fit:cover;opacity:.45;transition:opacity .15s ease}
.hp-vid-ref span{padding:4px 6px;font-size:11px;color:var(--muted);text-align:center}
.hp-vid-ref.is-on{border-color:var(--accent)}
.hp-vid-ref.is-on img{opacity:1}
.hp-vid-ref.is-on span{color:var(--text);font-weight:600}
.hp-vid-ref:focus-within{outline:2px solid var(--focus,#0a84ff);outline-offset:2px}
.hp-vid-prompt summary{cursor:pointer;font-size:13px;color:var(--muted)}
.hp-vid-prompt textarea{width:100%;margin-top:8px;font-size:13px;line-height:1.5;resize:vertical}
.hp-vid-cost{margin:0;font-size:14px}
.hp-vid-cost span{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}
.hp-proposal.is-saving{opacity:.7;pointer-events:none}
/* A card resizing after a model change eases to its new height (app.js updateCard). */
.hp-proposal.is-resizing{transition:height .22s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.hp-proposal.is-resizing{transition:none}}
/* Attaching a picture: ask Stormy about it, or break it down as an ad */
.hp-attach-mode{display:inline-flex;gap:2px;margin:0 0 8px;padding:3px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--text) 4%,transparent)}
.hp-attach-mode button{min-height:30px;padding:4px 12px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s ease,color .15s ease}
.hp-attach-mode button[aria-checked="true"]{background:var(--accent);color:#16110b}
.hp-attach-mode button:focus-visible{outline:2px solid var(--focus,#35d6f5);outline-offset:2px}
.hp-chat-pics{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.hp-chat-pic{padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:none;cursor:zoom-in}
.hp-chat-pic img{display:block;max-width:220px;max-height:180px;object-fit:cover}
@media (prefers-reduced-motion:reduce){.hp-attach-mode button{transition:none}}
/* A video being made, then the result */
.hp-render{display:grid;gap:10px}
.hp-render-wait{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center}
.hp-render-wait p{margin:0;display:grid;gap:3px}
.hp-render-wait small{color:var(--muted);font-size:12.5px}
.hp-render-shimmer{display:block;width:54px;aspect-ratio:9/16;border-radius:10px;background:linear-gradient(110deg,var(--raised) 30%,color-mix(in srgb,var(--accent) 30%,var(--raised)) 50%,var(--raised) 70%);background-size:220% 100%;animation:hp-shimmer 1.6s linear infinite}
@keyframes hp-shimmer{to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.hp-render-shimmer{animation:none}}
/* Something being made: an aurora in the frame's shape (orange and cyan drifting), a soft light sweeping down and the
   FuelStorm mark breathing. Transforms and opacity only; reduced motion keeps a still gradient. */
.hp-render-shimmer.hp-gen{position:relative;overflow:hidden;isolation:isolate;width:84px;background:#0c0d10;animation:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hp-gen i{position:absolute;pointer-events:none}
.hp-gen-m1,.hp-gen-m2,.hp-gen-m3{width:120%;aspect-ratio:1;border-radius:50%;filter:blur(14px);will-change:transform}
.hp-gen-m1{left:-60%;top:-30%;background:radial-gradient(circle,rgba(255,138,31,.85),rgba(255,138,31,0) 64%);animation:hp-gen-m1 7s ease-in-out infinite alternate}
.hp-gen-m2{right:-60%;bottom:-30%;background:radial-gradient(circle,rgba(53,214,245,.7),rgba(53,214,245,0) 64%);animation:hp-gen-m2 8s ease-in-out infinite alternate}
.hp-gen-m3{left:-10%;top:30%;width:90%;background:radial-gradient(circle,rgba(120,60,200,.35),rgba(120,60,200,0) 65%);animation:hp-gen-m3 6s ease-in-out infinite alternate}
.hp-gen-lay{left:-60%;top:-20%;width:220%;height:140%;transform:rotate(-28deg);mix-blend-mode:screen}
.hp-gen-lay b{position:absolute;left:0;border-radius:2px;transform:translateX(-120%);will-change:transform}
.hp-gen-far b{width:9%;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.3) 70%,rgba(255,255,255,.8));animation:hp-gen-skf 2.6s cubic-bezier(.6,0,.4,1) infinite}
.hp-gen-far b:nth-child(1){top:14%;animation-delay:-.5s}.hp-gen-far b:nth-child(2){top:29%;animation-delay:-1.7s;animation-duration:3s}.hp-gen-far b:nth-child(3){top:43%;animation-delay:-1s}.hp-gen-far b:nth-child(4){top:57%;animation-delay:-2.2s;animation-duration:2.3s}.hp-gen-far b:nth-child(5){top:72%;animation-delay:-.9s;animation-duration:2.9s}.hp-gen-far b:nth-child(6){top:87%;animation-delay:-1.5s}
.hp-gen-mid b{width:16%;height:1.2px;background:linear-gradient(90deg,rgba(255,138,31,0),rgba(255,138,31,.6) 72%,#ffe2c4);box-shadow:0 0 4px rgba(255,138,31,.6);animation:hp-gen-skm 1.3s cubic-bezier(.6,0,.4,1) infinite}
.hp-gen-mid b:nth-child(even){background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5) 72%,#fff);box-shadow:0 0 4px rgba(255,255,255,.45)}
.hp-gen-mid b:nth-child(1){top:22%;animation-delay:-.3s;animation-duration:1.6s}.hp-gen-mid b:nth-child(2){top:36%;animation-delay:-.9s}.hp-gen-mid b:nth-child(3){top:47%;animation-delay:-.5s;animation-duration:1s}.hp-gen-mid b:nth-child(4){top:55%;animation-delay:-1.1s;animation-duration:1.05s}.hp-gen-mid b:nth-child(5){top:66%;animation-delay:-.2s}.hp-gen-mid b:nth-child(6){top:80%;animation-delay:-.7s;animation-duration:1.7s}
.hp-gen-vig{inset:0;background:radial-gradient(120% 80% at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.62))}
.hp-gen-glow{left:50%;top:50%;width:62%;max-width:100px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0) 62%);animation:hp-gen-glow 1.6s ease-out infinite}
.hp-gen-mk{left:50%;top:50%;width:44%;max-width:72px;aspect-ratio:335/299;transform:translate(-50%,-50%)}
.hp-gen-mk svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));animation:hp-gen-beat 1.6s ease-out infinite}
.hp-gen-sheen{transform:translateX(0) skewX(-20deg);animation:hp-gen-sheen 3.2s cubic-bezier(.45,.05,.55,.95) infinite}
.hp-gen-grain{inset:0;opacity:.35;mix-blend-mode:overlay;background:repeating-radial-gradient(circle at 31% 27%,rgba(255,255,255,.14) 0 1px,rgba(0,0,0,0) 1px 3px),repeating-radial-gradient(circle at 73% 68%,rgba(0,0,0,.25) 0 1px,rgba(0,0,0,0) 1px 4px)}
@keyframes hp-gen-m1{to{transform:translate(70%,80%) scale(1.15)}}
@keyframes hp-gen-m2{to{transform:translate(-70%,-85%) scale(.9)}}
@keyframes hp-gen-m3{to{transform:translate(30%,-40%) scale(1.2)}}
@keyframes hp-gen-skf{to{transform:translateX(1150%)}}
@keyframes hp-gen-skm{to{transform:translateX(650%)}}
@keyframes hp-gen-glow{0%,100%{transform:translate(-50%,-50%) scale(.85);opacity:.4}12%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@keyframes hp-gen-beat{0%,100%{transform:scale(1)}10%{transform:scale(1.05)}24%{transform:scale(.995)}}
@keyframes hp-gen-sheen{0%{transform:translateX(0) skewX(-20deg)}45%,100%{transform:translateX(620px) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){.hp-gen *{animation:none!important}.hp-gen-lay b{transform:translateX(150%)}.hp-gen-sheen{transform:translateX(250px) skewX(-20deg)}}
.hp-render-video{width:100%;max-width:300px;max-height:520px;border-radius:14px;background:#000}
.hp-render-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.hp-render-foot .hp-code{font-size:13px!important;letter-spacing:.12em;color:var(--text)}
.hp-renders{display:grid;gap:10px;margin:0 0 12px;padding:0;list-style:none}
.hp-version.is-rendering{padding:12px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:14px}
.hp-ai-tag{color:var(--accent)!important}
/* Draft first: a cheap take to check, then the final from it */
.hp-vid-draft{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s ease}
.hp-vid-draft:has(input:checked){border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.hp-vid-draft input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--accent)}
.hp-vid-draft span{display:grid;gap:2px;font-size:13px}
.hp-vid-draft small{color:var(--muted);font-size:12.5px;line-height:1.4}
.hp-vid-draft:focus-within{outline:2px solid var(--focus,#0a84ff);outline-offset:2px}
.hp-draft-tag{padding:1px 8px;border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:999px;color:var(--text);font-size:12px}
.hp-final-row{display:grid;gap:4px;justify-items:start}
.hp-final-row small{font-size:12.5px}
.hp-render-final{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
/* What's off? on a finished video */
.hp-fix{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--text) 3%,transparent)}
.hp-fix[hidden]{display:none}
.hp-fix-chips{display:flex;flex-wrap:wrap;gap:6px}
.hp-fix-chips button{min-height:32px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.hp-fix-chips button:hover{border-color:color-mix(in srgb,var(--text) 35%,var(--line))}
.hp-fix-chips button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.hp-fix-note{width:100%;min-height:36px;font-size:13px}
.hp-fix .assist-card-actions{margin:0}
.hp-fix p{margin:0}
/* A reply as it streams: the text being written, then cards as they're prepared (read-only until it's done) */
.assist-pending .assist-live-text{margin:0 0 10px;color:var(--text);white-space:pre-wrap}
.assist-live-cards{display:grid;gap:12px;margin:0 0 12px}
.assist-live-cards .is-live button:disabled{cursor:progress}
/* Product images on Brand & offer */
.hp-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.hp-asset{position:relative;display:grid;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.hp-asset img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--bg)}
.hp-asset span{padding:6px 10px;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-asset button{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:#000000a6;color:#fff;font-size:15px;cursor:pointer}
.hp-asset-drop{display:grid;place-content:center;justify-items:center;gap:4px;height:100%;min-height:150px;border:1.5px dashed var(--line);border-radius:14px;background:var(--panel);color:var(--muted);text-align:center;cursor:pointer;font-size:13px}
.hp-asset-drop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.hp-asset-drop span{color:var(--text)}
.hp-asset-drop.is-over{border-color:var(--accent)}
.hp-asset-drop.is-busy{opacity:.7;pointer-events:none}
@media (max-width:520px){.hp-vid-settings{grid-template-columns:1fr 1fr}.hp-vid-settings label:nth-child(3){grid-column:1/-1}}
.hp-diff{display:grid;gap:3px;padding:8px 0;border-top:1px solid var(--line)}
.hp-diff-label{font-size:12px;color:var(--muted)}
.hp-diff del{color:var(--muted);text-decoration-color:color-mix(in srgb,var(--danger) 70%,transparent);font-size:13px}
.hp-diff ins{text-decoration:none;font-size:14px;line-height:1.45}
.hp-open{margin-top:8px}
/* Choice card: Stormy's question with tappable answers */
.hp-choices{display:grid;gap:10px;margin-top:12px;max-width:620px}
.hp-choices-q{margin:0 0 2px;font-weight:600}
.hp-choices-list{display:grid;gap:8px}
/* Stormy's question: one stacked row per answer (label over its hint), a quiet chevron that warms on hover. */
.hp-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:0;padding:13px 14px 13px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.hp-choice-text{display:grid;gap:4px;min-width:0}
.hp-choice-label{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.hp-choice strong{font-size:14.5px;font-weight:600;line-height:1.3}
.hp-choice small{color:var(--muted);font-size:13px;line-height:1.4}
.hp-choice-tag{padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:#ffb56e;font-size:11.5px;font-weight:600;line-height:1.4}
.hp-choice-mark{width:16px;height:16px;fill:none;stroke:color-mix(in srgb,var(--text) 38%,transparent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s,transform .15s}
.hp-choice:not(:disabled):is(:hover,:focus-visible){border-color:color-mix(in srgb,var(--accent) 70%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.hp-choice:not(:disabled):is(:hover,:focus-visible) .hp-choice-mark{stroke:var(--accent);transform:translateX(2px)}
.hp-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hp-choice:disabled{cursor:default}
.hp-choices.is-answered .hp-choice{padding-block:12px}
.hp-choices.is-answered .hp-choice:not(.is-picked){opacity:.45}
.hp-choices.is-answered .hp-choice :is(small,.hp-choice-tag){display:none}
.hp-choice.is-picked{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.hp-choice.is-picked:disabled{opacity:1}
.hp-choice.is-picked .hp-choice-mark{width:18px;height:18px;stroke:var(--accent);stroke-width:2.4}
@media (prefers-reduced-motion:reduce){.hp-choice,.hp-choice-mark{transition:none}.hp-choice:not(:disabled):is(:hover,:focus-visible) .hp-choice-mark{transform:none}}
.hp-fw-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hp-fw-chips li{display:flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 8px}

/* Model picker placement (the picker itself is the studio's .assist-model) */
.assist-model.is-reopened .assist-menu{animation:none!important}
.hp-picker-slot{display:inline-flex;align-items:center;align-self:center}
.hp-picker-slot .assist-model{margin:0}
/* In Stormy's column the menu hangs from the chat box, full width (sidebar.css), so the slot's picker mustn't be its anchor. */
.ws-chat-panel .assist-bar .hp-picker-slot>.assist-model{position:static}
.ws-chat-panel .assist-bar .hp-picker-slot .assist-menu.assist-picker{left:auto;right:8px;width:min(340px,calc(100% - 16px));transform-origin:bottom right}
.hp-picker-slot .assist-model>summary{display:inline-flex;align-items:center;gap:4px}
.hp-picker-row{display:flex;align-items:center;gap:10px;font-size:13px}
.hp-generate .assist-model .assist-menu{left:0;right:auto}

/* Claims as chips */
.hp-claim-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hp-claim-chips li{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.35;padding:6px 10px;border-radius:10px;border:1px solid #2e3237;border-left:3px solid color-mix(in srgb,var(--text) 28%,#2e3237);background:var(--panel)}
.hp-claim-chips li.is-add{border-left-color:var(--accent)}
.hp-claim-chips li.is-remove{text-decoration:line-through;color:var(--muted);border-left-color:var(--danger)}
.hp-claim-chips li.is-empty{border:0;background:none;padding:0}
.hp-claim-chips button{min-height:0;padding:0 2px;border:0;background:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.hp-claim-chips button:hover{color:var(--text)}
.hp-add-claim{display:flex;gap:8px;max-width:620px}
.hp-add-claim input{flex:1;min-width:0;box-sizing:border-box;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}

/* Offer and concept documents: content first, fields only on focus */
.hp-doc-head{display:grid;gap:10px;margin-bottom:22px}
#brandSurface .hp-title-input{box-sizing:border-box;width:100%;font:inherit;font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--text);background:none!important;border:1px solid transparent!important;border-radius:10px;padding:4px 8px;margin-left:-9px}
#brandSurface .hp-title-input:hover{border-color:var(--line)!important}
#brandSurface .hp-title-input:focus{border-color:var(--focus)!important;outline:none}
.hp-doc-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#brandSurface .hp-url-input{flex:1;min-width:200px;max-width:460px;box-sizing:border-box;font:inherit;font-size:14px;color:var(--muted);background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:999px;padding:7px 14px}
.hp-save{font-size:13px;color:var(--muted)}
.hp-ask svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px;fill:none;stroke:currentColor;stroke-width:1.7}
.hp-brief-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.hp-bcard,.hp-block{display:grid;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);cursor:text;transition:border-color .15s ease}
.hp-bcard:hover,.hp-block:hover{border-color:color-mix(in srgb,var(--text) 22%,var(--line))}
/* The brand bible's sections are one size: each card fills its grid cell, and rows are at least as tall as the
   tallest empty section, so the empty bible reads as an even grid while filled sections can still grow. */
.hp-brand .hp-brief-cards{grid-auto-rows:minmax(112px,auto)}
.hp-brand .hp-brief-cards>li{display:grid}
.hp-brand .hp-bcard{height:100%;box-sizing:border-box;align-content:start}
.hp-bcard:focus-within,.hp-block:focus-within{border-color:var(--focus)}
.hp-bcard>span,.hp-block>span{font-size:12px;font-weight:600;color:var(--muted)}
.hp-bcard textarea,.hp-block textarea{box-sizing:border-box;width:100%;font:inherit;font-size:15px;line-height:1.5;padding:0!important;border:0!important;background:none!important;color:var(--text);min-height:1.5em!important;outline:none;box-shadow:none!important}
.hp-bcard textarea::placeholder,.hp-block textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}

/* Generate concepts */
.hp-generate{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.hp-generate-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hp-make-ad{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-bottom:12px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel) 70%)}
.hp-make-ad>div{min-width:0;flex:1 1 260px}
.hp-make-ad strong{font-size:16px}
.hp-make-ad p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.hp-make-ad button{display:inline-flex;align-items:center;gap:8px}
.hp-make-ad button svg{width:16px;height:16px;fill:currentColor;stroke:none}
.hp-generate-lead{margin:0;color:var(--muted);font-size:14px}
.hp-fw-inline{font-size:14px;color:var(--muted)}
.hp-fw-inline b{color:var(--text);font-weight:600}
.hp-generate-options{display:grid;gap:12px}
.hp-segment{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;justify-self:start}
.hp-segment button{min-height:32px;padding:4px 16px;border:0;border-radius:999px;background:none;color:var(--muted);font-weight:600;cursor:pointer}
.hp-segment button[aria-pressed="true"]{background:var(--raised);color:var(--text)}
.hp-fw-picker{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.hp-fw-picker button{width:100%;display:flex;gap:10px;align-items:center;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);cursor:pointer}
.hp-fw-picker button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.hp-fw-picker span{display:grid;gap:1px}
.hp-fw-picker small{color:var(--muted);font-size:12px}
.hp-objective{box-sizing:border-box;width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text)}

/* Offers list */
.hp-offer-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.hp-offer-grid>li{display:flex;min-width:0}
.hp-offer-tile{flex:1;min-width:0;min-height:88px;display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-decoration:none;transition:border-color .15s ease}
.hp-offer-tile:hover{border-color:var(--accent)}
.hp-offer-tile span:last-child{display:grid;gap:3px;min-width:0}
.hp-offer-tile small{color:var(--muted);font-size:13px}
.hp-offer-tile strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-offer-mark{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:700;background:var(--raised);color:var(--accent)}
/* An offer's product photo on its card: product shots usually sit on white, so they get a soft white tile. */
.hp-offer-grid .hp-offer-mark{width:64px;height:64px;border-radius:14px;overflow:hidden}
.hp-offer-mark.has-photo{background:#f4f5f6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hp-offer-mark.has-photo img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}
.hp-blank{display:grid;gap:12px;max-width:460px;margin:0 0 22px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}

/* Concept page */
.hp-concept{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:start}
.hp-concept-preview{position:sticky;top:0;display:grid;gap:14px;justify-items:center}
/* Concept status: Draft or Approved, as a two-way switch (archiving lives in the page's own control). */
.hp-status-switch{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:100%;max-width:280px;margin:14px auto 0;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.hp-status-switch button{min-height:34px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .18s ease,color .18s ease}
.hp-status-switch button:hover{color:var(--text)}
.hp-status-switch button[aria-checked="true"]{background:var(--raised);color:var(--text)}
.hp-status-switch button[data-status="selected"][aria-checked="true"]{background:var(--accent);color:#16110b}
.hp-status-switch button:focus-visible{outline:2px solid var(--focus,#0a84ff);outline-offset:2px}
.hp-status-note{margin:6px auto 0;max-width:280px;color:var(--muted);font-size:12px;text-align:center}
.hp-concept-body{display:grid;gap:12px}
.hp-concept-body .hp-doc-head{margin-bottom:4px}
.hp-pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hp-pill{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.hp-pill select{font-size:13px}
.hp-pill{max-width:100%;min-width:0;flex-wrap:wrap}
.hp-pill .site-select{min-width:0;max-width:100%}
.hp-pill .site-select-trigger{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-toggle-chips{display:flex;flex-wrap:wrap;gap:8px}
.hp-toggle-chips button{min-height:0;font-size:13px;line-height:1.35;text-align:left;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer}
.hp-toggle-chips button[aria-pressed="true"]{color:var(--text);border-color:var(--insight);border-left-width:3px}
.hp-beats{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:beat}
.hp-beat{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:start}
.hp-beat::before,.hp-beat .hp-remove-beat{margin-top:7px}
.hp-beat::before{counter-increment:beat;content:counter(beat);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
.hp-beat textarea{box-sizing:border-box;width:100%;font:inherit;font-size:15px;line-height:1.4;padding:6px 8px;border:1px solid transparent;border-radius:8px;background:var(--bg);color:var(--text)}
.hp-beat textarea:focus{border-color:var(--focus);outline:none}
.hp-block .text-button{justify-self:start}

/* Discover and concept cards */
.hp-discover{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));grid-auto-rows:1fr;gap:18px}
/* Every card is as tall as the tallest: the card fills its cell and its body takes the slack. */
.hp-discover>li{display:flex;min-width:0}
.hp-discover .hp-card{flex:1;grid-template-rows:auto 1fr}
.hp-discover .hp-card-body{align-content:start}
.hp-card{display:grid;text-decoration:none;color:var(--text);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);transition:border-color .15s ease,transform .15s ease}
.hp-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.hp-card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.hp-card-stage{display:grid;place-items:center;padding:20px 0;background:radial-gradient(120% 80% at 50% 0%,var(--raised),var(--panel) 70%)}
.hp-card-body{display:grid;gap:10px;padding:14px 16px 16px;border-top:1px solid var(--line)}
.hp-card-body strong{font-size:16px;letter-spacing:-.01em;color:var(--text)}
.hp-card:hover .hp-card-body strong{color:var(--accent)}
.hp-chips{display:flex;flex-wrap:wrap;gap:6px}
.hp-chips span{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.hp-chips span.is-on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}

.hp-phone{width:150px;aspect-ratio:9/16;border-radius:22px;padding:6px;background:#060b14;border:1px solid var(--line);box-shadow:0 18px 40px #0007;flex:none}
.hp-phone.is-large{width:250px}
.hp-phone-screen{height:100%;box-sizing:border-box;border-radius:17px;background:linear-gradient(180deg,#14223a,#0b1220 60%);padding:12px 11px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.hp-phone-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.hp-motif{width:18px;height:18px;color:var(--accent);flex:none}
.hp-phone-hook{flex:none;margin:0;max-width:none;font-size:11.5px;line-height:1.35;font-weight:700;color:var(--text)!important;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hp-phone-beats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:5px;flex:1;min-height:0;overflow:hidden;align-content:start}
.hp-phone-beats li{display:flex;gap:6px;align-items:flex-start;font-size:9.5px;line-height:1.3;color:var(--muted);background:#ffffff0d;border:1px solid #ffffff12;border-radius:6px;padding:5px 6px}
.hp-phone-beats li b{font-weight:inherit}
.hp-phone:not(.is-large) .hp-phone-beats li{align-items:center;white-space:nowrap}
.hp-phone:not(.is-large) .hp-phone-beats li b{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hp-phone:not(.is-large) .hp-phone-beats li:nth-child(n+4){display:none}
.hp-phone-beats li span{flex:none;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;font-weight:700;color:var(--bg);background:var(--insight)}
.hp-phone-beats li:first-child{color:var(--text);border-color:#35d6f540}
.hp-phone-cta{flex:none;font-size:10px;font-weight:700;text-align:center;color:var(--bg);background:var(--accent);border-radius:999px;padding:5px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-phone.is-large .hp-phone-hook{font-size:15px;-webkit-line-clamp:4}
.hp-phone.is-large .hp-phone-beats li{font-size:12px;padding:7px 8px}
.hp-phone.is-large .hp-phone-beats li span{width:18px;height:18px;font-size:10px}
.hp-phone.is-large .hp-phone-cta{font-size:12px;padding:7px 10px}

.hp-framework{display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:start}
.hp-framework-preview{position:sticky;top:0;padding:8px 0}
.hp-framework-body .ecom-page-head{margin-bottom:22px}
.hp-framework .ecom-next{margin-top:30px}
.hp-steps{margin:0;padding-left:22px;display:grid;gap:6px;line-height:1.55}
.hp-bullets{margin:0;padding-left:20px;display:grid;gap:6px;line-height:1.55}
.hp-examples{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.hp-examples a{display:grid;gap:6px;color:var(--text)}
.hp-examples img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.hp-examples-empty{margin:0;color:var(--muted)}

/* Brief */
.hp-brief{max-width:760px;display:grid;gap:26px}
.hp-brief section{display:grid;gap:8px}
.hp-brief h2{margin:0}
.hp-brief-head{display:flex;gap:16px;align-items:center}
.hp-brief-head img{width:44px}
.hp-brief-head h1{margin:4px 0 0}
.hp-brief-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hp-facts{display:grid;gap:14px;margin:0}
.hp-facts dt{color:var(--muted);font-size:14px}
.hp-facts dd{margin:2px 0 0;white-space:pre-line}
.hp-script{white-space:pre-line;font-size:17px;line-height:1.6;margin:0}
.hp-evidence-list{list-style:none;padding:0}
.hp-evidence-list li{border-left:3px solid var(--insight);padding-left:12px}
.hp-checklist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hp-checklist li::before{content:"";display:inline-block;width:14px;height:14px;border:1.5px solid var(--muted);border-radius:3px;margin-right:10px;vertical-align:-2px}


/* Versions and tests */
.hp-drop{display:grid;gap:4px;justify-items:center;text-align:center;padding:22px;border:1.5px dashed var(--line);border-radius:14px;background:var(--panel);cursor:pointer;color:var(--muted)}
.hp-drop span{color:var(--text)}
.hp-drop.is-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.hp-versions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.hp-version{display:grid;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.hp-version[data-status="failed"],.hp-version.is-failed{border-color:var(--danger)}
.hp-version-media{aspect-ratio:4/5;background:#060b14;display:grid;place-items:center;overflow:hidden}
.hp-version-media :is(img,video){width:100%;height:100%;object-fit:contain;background:#060b14}
.hp-media-empty{font-size:13px;color:var(--muted)}
.hp-version-body{display:grid;gap:6px;padding:12px 14px;justify-items:start}
.hp-version-body small{color:var(--muted);font-size:13px}
.hp-version-open{position:relative;display:block;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:#060b14;cursor:pointer}
.hp-version-open :is(img,video){width:100%;height:100%;object-fit:contain;pointer-events:none}
.hp-version-play{position:absolute;left:10px;bottom:10px;transform-origin:left bottom;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--text) 20%,transparent);border-radius:999px;background:rgba(6,9,14,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:600;transition:background .18s,border-color .18s,transform .18s}
.hp-version-play svg{width:13px;height:13px;margin-left:-3px;fill:currentColor;stroke:none}
.hp-version-open:is(:hover,:focus-visible) .hp-version-play{background:var(--accent);border-color:transparent;transform:scale(1.04)}
.hp-version-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#brandSurface .hp-code,.hp-ver-byline .hp-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:12px!important;line-height:1.5!important;font-weight:600;letter-spacing:.04em;padding:2px 8px;border-radius:6px;border:1px solid color-mix(in srgb,var(--insight) 55%,var(--line));color:var(--insight)}
.hp-progress{width:100%;height:6px;border-radius:999px;background:var(--raised);overflow:hidden}
.hp-progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s ease}
.hp-stepper{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;font-size:12px}
.hp-stepper li{padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.hp-stepper li.is-done{color:var(--text);border-color:color-mix(in srgb,var(--insight) 45%,var(--line))}
.hp-stepper li.is-current{color:var(--bg);background:var(--accent);border-color:var(--accent);font-weight:600}
.hp-test-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.hp-test-card{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);text-decoration:none;transition:border-color .15s ease}
.hp-test-card:hover{border-color:var(--accent)}
.hp-test-card small{color:var(--muted)}
.hp-test-card strong{color:var(--text);line-height:1.35}
.hp-test-card:hover strong{color:var(--accent)}
.hp-test-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.hp-test-thumb{position:relative;display:grid;width:72px;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#060b14;border:1px solid var(--line)}
.hp-test-thumb :is(img,video){width:100%;height:100%;object-fit:cover;pointer-events:none}
.hp-test-thumb video{pointer-events:none}
.hp-test-thumb em{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:10px;padding:1px 5px;border-radius:5px;background:#000a;color:var(--text)}
.hp-pick-versions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.hp-pick-versions button{width:100%;display:flex;gap:10px;align-items:center;text-align:left;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);cursor:pointer}
.hp-pick-versions button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.hp-pick-versions button>span:last-child{display:grid;gap:2px}
.hp-pick-versions small{color:var(--muted);font-size:12px}
form.hp-doc,div.hp-doc{display:grid;gap:12px}
.hp-doc-head{margin-bottom:10px!important}
#brandSurface .hp-small-input{width:96px!important;flex:none;box-sizing:border-box;font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text)}
.hp-pill input[type=date]{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);color-scheme:dark}
#brandSurface .hp-hypothesis{font-size:clamp(22px,2.4vw,30px);line-height:1.2;resize:none}

@media (max-width:980px){
 .hp-concept{grid-template-columns:1fr;gap:24px}
 .hp-concept-preview{position:static}
}
@media (max-width:760px){
 .hp-framework{grid-template-columns:1fr;gap:24px}
 .hp-framework-preview{position:static;display:grid;justify-items:center}
 .hp-brief-cards{grid-template-columns:1fr}
 .hp-discover{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hp-card-stage{padding:14px 0}
 .hp-card-body{padding:10px 10px 12px}
 .hp-card-body strong{font-size:14px}
 .hp-chips span:nth-child(n+3){display:none}
 .hp-phone{width:118px}
 .hp-phone:not(.is-large) .hp-phone-beats li:nth-child(n+3){display:none}
 .hp-phone.is-large{width:210px}
 .hp-chat-page{min-height:calc(100dvh - var(--app-top,90px) - 160px)}
}
@media (prefers-reduced-motion:reduce){.hp-card,.hp-offer-tile,.hp-bcard,.hp-block{transition:none}.hp-card:hover{transform:none}}

@page{margin:18mm 16mm}
@media print{
 html,body{height:auto!important;overflow:visible!important;background:#fff!important;color:#0b1220!important}
 body::after,.studio-rail,body>header,.ws-sidebar,.ws-context,.ws-drawer-toggle,.app-footer,.hp-no-print,.hp-toasts{display:none!important}
 main{margin:0!important;padding:0!important;overflow:visible!important}
 .ws-layout{display:block!important}
 .hp-brief{max-width:none;color:#0b1220}
 .hp-brief-head img{display:none}
 .hp-muted,.hp-facts dt{color:#4a5568!important}
 .hp-notice{color:#4a5568!important;border-color:#cbd5e0!important}
 .hp-evidence-list li{border-color:#0b7c91}
 .hp-brief section{break-inside:avoid}
}

/* Discover: the shared ad library (public/hosted/discover.js). Global, so it takes the workspace panel's place. */
.hp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp-danger{color:var(--danger)!important}
.ws-layout.is-discover{grid-template-columns:minmax(0,1fr)!important}
.ws-layout.is-discover>:is(.ws-sidebar,.ws-scrim,.ws-context),.ws-layout.is-discover .ws-drawer-toggle{display:none!important}
.hp-disc-page{padding:0 0 64px}
.hp-disc{display:grid;grid-template-columns:262px minmax(0,1fr);gap:20px;align-items:start}
.hp-disc-filters{position:sticky;top:calc(var(--app-top,90px) + 12px);max-height:calc(100dvh - var(--app-top,90px) - 40px);overflow-y:auto;overscroll-behavior:contain;display:grid;gap:14px;align-content:start;padding:14px;border-radius:18px;
 background:var(--hp-glass);-webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);border:1px solid var(--hp-glass-line);box-shadow:var(--hp-glass-edge)}
.hp-disc-filters h2{margin:0;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.hp-disc-fhead{display:flex;justify-content:space-between;align-items:center}
.hp-disc-close{display:none}
.hp-disc-views{display:grid;gap:2px}
.hp-disc-views button,.hp-disc-view-row>button:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:10px;background:none;color:var(--text);font-size:14px;text-align:left}
.hp-disc-views button:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.hp-disc-views button[aria-pressed="true"]{background:color-mix(in srgb,var(--text) 9%,transparent)}
.hp-disc-views small{color:var(--muted);font-variant-numeric:tabular-nums}
.hp-disc-view-row{display:flex;align-items:center;gap:4px}
.hp-disc-view-row>button:first-child{flex:1;min-width:0}
.hp-disc-x{flex:none;width:24px;height:24px;border:0;border-radius:50%;background:var(--raised);color:var(--muted);line-height:1;font-size:15px;padding:0}
.hp-disc-saveview{display:flex;gap:6px}.hp-disc-saveview input{flex:1;min-width:0}
.hp-disc-group{display:grid;gap:9px;padding-top:12px;border-top:1px solid var(--hp-glass-line)}
.hp-disc-ghead{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:none;color:var(--text);font-weight:700;font-size:14px;text-align:left}
.hp-disc-ghead small{color:var(--accent);font-size:12px}
.hp-disc-ghead::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease}
.hp-disc-group.is-closed .hp-disc-ghead::after{transform:rotate(-45deg)}
.hp-disc-group.is-closed .hp-disc-opts{display:none}
.hp-disc-opts{display:flex;flex-wrap:wrap;gap:6px}
.hp-disc-opt{border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:color-mix(in srgb,var(--text) 3%,transparent);color:var(--muted);font-size:13px;min-height:0}
.hp-disc-opt small{color:var(--muted);opacity:.75;font-variant-numeric:tabular-nums}
.hp-disc-opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--dark);font-weight:600}
.hp-disc-opt[aria-pressed="true"] small{color:var(--dark)}
.hp-disc-toggle{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.hp-disc-toggle>span{white-space:nowrap}
.hp-disc-toggle input{accent-color:var(--accent);width:16px;height:16px}
#brandSurface .hp-disc-toggle select{width:auto;font-size:13px;padding:4px 8px;height:auto;border-radius:999px}
.hp-disc-results{min-width:0;display:grid;gap:14px;align-content:start}
.hp-disc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hp-disc-head h1{margin:0 0 8px;font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;line-height:1.1}
.hp-disc-head p{margin:0;color:var(--muted);max-width:64ch;line-height:1.55}
.hp-disc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hp-disc-search{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.hp-disc-search svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.8}
#brandSurface .hp-disc-search input{flex:1;min-width:0;border:0!important;background:none!important;outline:none;padding:0;height:auto;color:var(--text);font-size:14px}
.hp-disc-search kbd{font:12px ui-monospace,Menlo,monospace;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.hp-disc-filter-btn{display:none!important}
.hp-disc-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
#brandSurface .hp-disc-sort select{width:auto;height:38px;border-radius:999px;padding:0 12px;font-size:13px}
.hp-disc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:28px}
.hp-disc-count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;margin-right:4px}
.hp-disc-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 5px 3px 11px;font-size:13px;background:var(--panel)}
.hp-disc-chip button{width:20px;height:20px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--raised);color:var(--muted);line-height:1}
.hp-disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.hp-ad{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:16px;overflow:hidden;isolation:isolate;background:#05070b;color:#fff;text-align:left;cursor:pointer;box-shadow:0 0 0 1px var(--line);transition:box-shadow .15s ease}
.hp-ad:hover,.hp-ad:focus-visible{box-shadow:0 0 0 2px var(--accent);outline:none}
.hp-ad-media{position:absolute;inset:0}
.hp-ad-img,.hp-ad-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-ad-img.is-contain{object-fit:contain}
.hp-ad-backdrop{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(18px) brightness(.55)}
.hp-ad-blank{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 30%,#1d2330,#07090d 70%)}
.hp-ad-top{position:absolute;inset:10px 10px auto 10px;z-index:2;display:flex;justify-content:space-between;gap:6px}
.hp-ad-pill{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(5,8,15,.72);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);color:#fff}
.hp-ad-pill.is-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#5fd39a;margin-right:5px;vertical-align:1px}
.hp-ad-saved{position:absolute;top:40px;right:10px;z-index:2;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--dark)}
.hp-ad-bottom{position:absolute;inset:auto 0 0 0;z-index:2;display:grid;gap:6px;padding:64px 12px 12px;background:linear-gradient(to top,rgba(4,6,10,.96) 0,rgba(4,6,10,.9) 38%,rgba(4,6,10,.55) 70%,rgba(4,6,10,0))}
.hp-ad-tag{justify-self:start;font-size:10.5px;font-weight:700;color:var(--accent);background:rgba(5,8,15,.72);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:999px;padding:2px 7px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hp-ad-hook{font-weight:700;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-ad-by{font-size:12px;color:#c7d0dc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* One quiet line: versions · reach, engagement bars at the end. Never wraps or overflows the card. */
.hp-ad-stats{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;font-size:11.5px;color:#b9c3d1;padding-top:2px}
.hp-ad-stats>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hp-ad-stats>span+span:not(.hp-tier)::before{content:"·";margin-right:8px;color:#6f7a8a}
.hp-ad-stats b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.hp-ad-stats em{font-style:normal}
.hp-ad-stats .hp-tier{flex:none;margin-left:auto}
.hp-ad-progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;background:color-mix(in srgb,var(--text) 10%,transparent)}
.hp-ad-progress i{display:block;height:100%;width:0;background:var(--accent)}
/* Concept cards: Discover's full-frame card; without a version, the opening line is set as the ad's first frame */
.hp-cc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.hp-cc,#brandSurface .hp-cc{text-decoration:none;color:#fff}
.hp-ad-pill.is-on{background:var(--accent);border-color:transparent;color:var(--dark)}
/* Picking ads to ask Stormy about: a round toggle in the card's top-left corner, shown on hover or focus and always
   while anything is picked (and on touch screens). The card's top pills step aside for it. */
.hp-ad-wrap{position:relative;min-width:0}
.hp-ad-pick{position:absolute;top:8px;left:8px;z-index:3;display:grid;place-items:center;width:32px;height:32px;min-height:0;padding:0;border:2px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(5,8,15,.45);color:var(--dark);opacity:0;transition:opacity .15s ease,background-color .15s ease,border-color .15s ease}
.hp-ad-pick::before{content:"";position:absolute;inset:-8px}
.hp-ad-pick svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hp-ad-wrap:hover .hp-ad-pick,.hp-ad-pick:focus-visible,.is-picking .hp-ad-pick{opacity:1}
.hp-ad-pick[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.hp-ad-pick[aria-pressed="true"] svg{opacity:1}
.hp-ad-pick:disabled{opacity:0!important;pointer-events:none}
.hp-ad-wrap:hover .hp-ad-top,.hp-ad-wrap:focus-within .hp-ad-top,.is-picking .hp-ad-top{left:50px}
.hp-ad-wrap.is-picked .hp-ad{box-shadow:0 0 0 2px var(--accent)}
@media (hover:none){.hp-ad-pick{opacity:1}.hp-ad-wrap .hp-ad-top{left:50px}}
.hp-pick-bar{position:sticky;bottom:16px;z-index:20;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);margin:16px auto 0;padding:8px 8px 8px 18px;border:1px solid var(--hp-glass-line);border-radius:16px;background:color-mix(in srgb,var(--raised) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.45);font-size:14px}
.hp-pick-bar[hidden]{display:none}
.hp-pick-bar small{color:var(--muted);font-size:12px}
.hp-pick-bar>span{white-space:nowrap}
@media (max-width:760px){.hp-pick-bar{gap:8px;max-width:calc(100% - 24px);padding-left:14px}.hp-pick-bar small{display:none}}
/* Recreate with no offer yet: the reason and the way there, inside the window. */
/* The library's ad window, quiet timeline: one line of facts, beats as a plain timeline you can play from (hairlines,
   not boxes), and one row of actions with the rarer ones behind ⋯. Version detail keeps the boxed look for now. */
.is-quiet .hp-disc-player{grid-template-rows:minmax(0,1fr)}
.is-quiet .hp-disc-info{grid-template-rows:auto auto minmax(0,1fr) auto}
.is-quiet .hp-disc-ihead{gap:0;padding:24px 28px 0;border-bottom:0}
.is-quiet .hp-disc-irow h2{margin:6px 0 0;font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.hp-disc-by{margin:0;font-size:13px;color:var(--muted)}
.hp-disc-facts{margin:10px 0 0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.is-quiet .hp-disc-tabs{gap:24px;margin-top:18px;padding:0 28px}
.is-quiet .hp-disc-tabs button{padding:10px 0}
.is-quiet .hp-disc-pane{padding:4px 28px 20px}
.hp-disc-timeline{list-style:none;margin:0;padding:0}
.hp-disc-timeline li+li{border-top:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.hp-disc-timeline .hp-disc-beat{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:start;justify-content:stretch;justify-items:start;gap:12px;width:100%;min-height:0;margin:0;padding:14px 8px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:left}
button.hp-disc-beat{cursor:pointer;transition:background-color .15s ease}
button.hp-disc-beat:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
button.hp-disc-beat:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
button.hp-disc-beat:disabled{opacity:.5;cursor:default}
.hp-disc-beat time{padding-top:1px;font-size:13px;color:var(--insight);font-variant-numeric:tabular-nums}
.hp-disc-beat b{display:block;font-size:14px;font-weight:650}
.hp-disc-beat b+span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--text) 86%,transparent)}
.hp-disc-beat small{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.hp-disc-beat.is-now{background:color-mix(in srgb,var(--insight) 9%,transparent)}
.hp-disc-beat.is-now b{color:var(--insight)}
.is-quiet .hp-disc-foot{gap:10px;padding:16px 28px;background:none}
.hp-disc-target{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.hp-disc-target[hidden]{display:none}
.hp-disc-target select{width:auto;max-width:min(260px,100%);height:36px;border-radius:999px;padding:0 30px 0 12px;font-size:13px}
.hp-disc-target .site-select:has(>select[hidden]){display:none}
.hp-disc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hp-disc-actions>button{min-height:44px}
.hp-disc-grow{flex:1}
.hp-disc-ask{display:inline-flex;align-items:center;gap:8px}
.hp-disc-ask svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.hp-disc-actions .hp-disc-icon,.hp-disc-more>summary.hp-disc-icon{display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;border:1px solid var(--line);border-radius:12px;background:none;color:var(--text)}
.hp-disc-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.hp-disc-more>summary.hp-disc-icon svg{stroke-width:3}
#disc-save[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
#disc-save[aria-pressed="true"] svg{fill:currentColor}
.hp-disc-more .hp-more-panel{top:auto;bottom:calc(100% + 8px)}
@media (max-width:760px){.is-quiet .hp-disc-ihead{padding:18px 18px 0}.is-quiet .hp-disc-tabs{padding:0 18px;gap:18px}.is-quiet .hp-disc-pane{padding:4px 18px 18px}.is-quiet .hp-disc-foot{padding:14px 18px}
 .hp-disc-actions>.primary{flex:1 1 100%;justify-content:center;text-align:center}}
.hp-disc-need{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:14px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.hp-disc-need[hidden]{display:none}
.hp-disc-need p{flex:1;margin:0;font-size:14px;line-height:1.45}
.hp-disc-need-go{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:10px;background:var(--accent);color:var(--dark);font-weight:650;text-decoration:none}
.hp-disc-need-go:hover{filter:brightness(1.08)}
.assist-attach.is-lib em{display:grid;place-items:center;height:100%;padding:4px;font-size:9.5px;font-style:normal;font-weight:600;line-height:1.15;text-align:center;color:var(--muted);overflow:hidden}
.hp-cc .hp-ad-video{transition:filter .2s ease}
.hp-cc[data-plays]:not(.is-playing) .hp-ad-video{filter:brightness(.82)}
.hp-cc-frame{position:absolute;inset:0;display:grid;align-content:start;justify-items:center;padding:30% 14px 0;text-align:center;background:radial-gradient(90% 55% at 50% 22%,rgba(255,138,31,.16),rgba(255,138,31,0) 70%),linear-gradient(180deg,#141a24,#07090d 78%)}
.hp-cc-frame .hp-motif{width:22px;height:22px;margin-bottom:14px;opacity:.9}
.hp-cc-frame b{font-size:19px;font-weight:800;line-height:1.22;letter-spacing:-.015em;text-wrap:balance;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.hp-tier{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.hp-tier i{width:4px;border-radius:1px;background:color-mix(in srgb,var(--text) 22%,transparent)}
.hp-tier i.is-on{background:var(--accent)}
.hp-tier .h1{height:5px}.hp-tier .h2{height:7px}.hp-tier .h3{height:9px}.hp-tier .h4{height:11px}.hp-tier .h5{height:14px}
.hp-disc-more{display:flex;justify-content:center;padding:18px 0}
.hp-disc-empty{display:grid;gap:12px;justify-items:start;max-width:62ch;padding:36px 0}
.hp-disc-empty h2{margin:0}.hp-disc-empty p{margin:0;color:var(--muted);line-height:1.6}
.hp-disc-research{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.hp-disc-tablewrap{min-width:0;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.hp-disc-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13.5px}
.hp-disc-table th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.hp-disc-table td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.hp-disc-table tbody tr{cursor:pointer}
.hp-disc-table tbody tr:hover{background:color-mix(in srgb,var(--text) 3%,transparent)}
.hp-disc-table tbody tr[aria-selected="true"]{background:rgba(255,138,31,.08);box-shadow:inset 3px 0 0 var(--accent)}
.hp-disc-table .is-num{text-align:right;font-variant-numeric:tabular-nums}
.hp-disc-thumb{position:relative;display:block;width:40px;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#05070b}
.hp-disc-cell{display:grid;gap:2px;min-width:220px}.hp-disc-cell b{font-weight:600}.hp-disc-cell small{color:var(--muted)}
.hp-disc-preview{position:sticky;top:calc(var(--app-top,90px) + 12px);display:grid;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.hp-disc-preview .hp-ad{border-radius:0;box-shadow:none;aspect-ratio:4/5}
.hp-disc-pv{display:grid;gap:12px;padding:14px}
.hp-disc-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.hp-disc-kv.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-disc-kv>div{display:grid;gap:2px;min-width:0}
.hp-disc-kv dt{font-size:12px;color:var(--muted)}
.hp-disc-kv dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* Breakdown overlay */
.hp-disc-detail{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(3,5,9,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hp-disc-sheet{width:min(1180px,100%);height:min(840px,100%);display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);border:1px solid var(--hp-glass-line);border-radius:22px;overflow:hidden;background:var(--bg);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hp-disc-player{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;background:none}
/* Media keeps its own shape, rounded, centred in the area: no black bars around it. */
.hp-disc-player>img{width:auto;height:auto;max-width:calc(100% - 32px);max-height:calc(100% - 32px);min-height:0;place-self:center;border-radius:16px;object-fit:contain;background:none}
.hp-disc-scrub{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-top:1px solid var(--line);background:#07090d}
.hp-disc-scrub button{display:inline-flex;align-items:center;gap:6px;min-height:0;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font-size:12px;font-weight:600;white-space:nowrap}
.hp-disc-scrub time{font:11px ui-monospace,Menlo,monospace;color:var(--insight)}
.hp-disc-scrub button.is-now{border-color:var(--insight);background:rgba(53,214,245,.12)}
.hp-disc-scrub button:disabled{opacity:.45;cursor:default}
.hp-disc-info{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-width:0;min-height:0}
.hp-disc-ihead{display:grid;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.hp-disc-irow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hp-disc-irow>div{min-width:0}
.hp-disc-irow h2{margin:4px 0 0;font-size:22px;letter-spacing:-.025em;line-height:1.2}
.hp-disc-close-x{position:relative;flex:none;width:36px;height:36px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--raised);color:var(--text);font-size:0;line-height:0}
/* The × glyph sits off-centre in most fonts. A mask on the button's own box shares the circle's pixel grid, so the X stays centred even at fractional positions. */
.hp-disc-close-x::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px 14px no-repeat}
.hp-disc-tabs{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--line);overflow-x:auto}
.hp-disc-tabs button{padding:11px 12px;min-height:0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap}
.hp-disc-tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
.hp-disc-pane{overflow:auto;padding:18px 20px;display:grid;gap:18px;align-content:start}
.hp-disc-pane h3{margin:0 0 9px;font-size:15px}
.hp-disc-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hp-disc-steps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.hp-disc-steps time{font:12px ui-monospace,Menlo,monospace;color:var(--insight);padding-top:2px}
.hp-disc-steps b{display:block;font-weight:600}.hp-disc-steps small{display:block;color:var(--muted);margin-top:2px}
.hp-disc-why{padding:14px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,138,31,.08),rgba(53,214,245,.06))}
.hp-disc-why ul{margin:0;padding-left:18px;color:var(--muted);display:grid;gap:4px}
.hp-disc-transcript{padding:12px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--muted);line-height:1.6}
.hp-disc-related{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hp-disc-related .hp-ad{border-radius:10px}
.hp-disc-related :is(.hp-ad-stats,.hp-ad-tag,.hp-ad-by){display:none}
.hp-disc-related .hp-ad-hook{font-size:11px}
.hp-disc-related .hp-ad-bottom{padding:28px 8px 8px}
.hp-disc-foot{display:grid;gap:8px;padding:14px 20px;border-top:1px solid var(--line);background:var(--panel)}
/* Version popup: Discover's sheet, with the brief the version was made from */
.hp-ver-byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.hp-ver-detail .hp-disc-scrub{position:relative;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-block:12px}
.hp-ver-detail .hp-disc-scrub button{flex:none;max-width:210px}
.hp-ver-detail .hp-disc-scrub button span{overflow:hidden;text-overflow:ellipsis}
.hp-ver-jump{min-height:0;padding:0;border:0;border-radius:4px;background:none;text-align:left;cursor:pointer}
.hp-ver-jump:is(:hover,:focus-visible) time{text-decoration:underline;text-underline-offset:3px}
.hp-disc-kv.hp-ver-message{grid-template-columns:minmax(0,1fr);gap:12px}
.hp-ver-message dd{font-weight:500;line-height:1.5}
.hp-ver-claims{margin:0;padding-left:18px;display:grid;gap:4px;color:var(--muted)}
.hp-ver-prompt-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:9px}
.hp-ver-prompt-head h3{margin:0}
.hp-ver-prompt-head span{font-size:13px}
.hp-ver-prompt{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);font-size:13.5px;line-height:1.6}
.hp-disc-recreate{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hp-disc-recreate select{width:auto!important;flex:0 1 auto;min-width:0;max-width:min(300px,100%);height:40px;border-radius:999px;padding:0 30px 0 12px;font-size:13px}
/* Curator drawers */
.hp-disc-drawer-host{position:fixed;inset:0;z-index:95;background:rgba(3,5,9,.6)}
.hp-disc-drawer{position:absolute;top:0;right:0;bottom:0;width:min(580px,100%);display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--bg);border-left:1px solid var(--hp-glass-line);box-shadow:-30px 0 60px rgba(0,0,0,.4)}
.hp-disc-dhead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;padding-top:max(16px,env(safe-area-inset-top,0px));border-bottom:1px solid var(--line)}
.hp-disc-dhead h2{margin:0;font-size:19px}
.hp-disc-dbody{overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 48px;padding-bottom:max(48px,env(safe-area-inset-bottom,0px))}
.hp-disc-form{display:grid;gap:14px}
.hp-disc-field{display:grid;gap:6px;min-width:0;border:0;margin:0;padding:0}
.hp-disc-field>span,.hp-disc-field legend{font-size:13px;font-weight:600;padding:0;margin-bottom:2px}
.hp-disc-field small{color:var(--muted);font-size:12px}
.hp-disc-form :is(input:not([type=checkbox]),select,textarea){box-sizing:border-box;width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}
.hp-disc-form textarea{resize:vertical;min-height:0;height:auto}
.hp-disc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.hp-disc-checks{display:flex;flex-wrap:wrap;gap:8px 16px}
.hp-disc-checks label{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.hp-disc-checks input{accent-color:var(--accent);width:16px;height:16px}
.hp-disc-beats{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hp-disc-beat{display:grid;grid-template-columns:64px 96px minmax(0,1fr) minmax(0,1fr) 24px;gap:6px;align-items:center}
.hp-disc-suggest{display:grid;gap:10px;padding:14px;border:1px dashed rgba(255,138,31,.45);border-radius:12px}
.hp-disc-suggest p{margin:0;color:var(--muted);line-height:1.5}.hp-disc-suggest p strong{color:var(--text)}
.hp-disc-suggest>button{justify-self:start}
.hp-disc-sugcard{display:grid;gap:12px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel)}
.hp-disc-dfoot{position:sticky;bottom:-48px;padding:12px 0;background:var(--bg)}
.hp-disc-confirm{display:grid;gap:10px;padding:12px;border:1px solid var(--danger);border-radius:10px}
.hp-disc-confirm p{margin:0}
#add-drop.is-over{border-color:var(--accent)}
@media (max-width:1320px){.hp-disc-research{grid-template-columns:1fr}.hp-disc-preview{display:none}}
@media (max-width:1000px){
 .hp-disc{grid-template-columns:1fr}
 .hp-disc-filters{position:fixed;inset:0 auto 0 0;top:0;z-index:92;width:min(340px,88vw);max-height:none;height:100%;border-radius:0 18px 18px 0;background:var(--hp-glass-strong);transform:translateX(-104%);transition:transform .25s ease;padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
 .hp-disc-filters.is-open{transform:none}
 .hp-disc-scrim{position:fixed;inset:0;z-index:91;background:rgba(0,0,0,.5)}
 .hp-disc-filter-btn{display:inline-flex!important}
 .hp-disc-close{display:inline}
}
@media (max-width:760px){
 .hp-disc-grid,.hp-cc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hp-ad-hook{font-size:13px}
 .hp-cc-frame{padding:26% 10px 0}
 .hp-cc-frame b{font-size:15px;-webkit-line-clamp:4}
 .hp-cc-frame .hp-motif{width:18px;height:18px;margin-bottom:10px}
 .hp-ad-stats{gap:6px;font-size:11px}
 .hp-ad-stats>span+span:not(.hp-tier)::before{margin-right:6px}
 .hp-ad-bottom{padding:40px 9px 9px}
 .hp-disc-search kbd{display:none}
 .hp-disc-sheet{display:block;height:100%;overflow-y:auto}
 .hp-disc-player{height:58vh}
 .hp-disc-info{display:block}
 .hp-disc-kv.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hp-disc-related{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hp-disc-beat{grid-template-columns:64px minmax(0,1fr) 24px}
 .hp-disc-beat [data-b=text],.hp-disc-beat [data-b=why]{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.hp-disc-filters{transition:none}}
/* The studio swaps selects for its own picker (selects.js); size the wrapper. */
.hp-disc-recreate .site-select{flex:0 1 auto;width:auto;min-width:160px;max-width:min(300px,100%)}
.hp-disc-recreate .site-select-trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-disc-sort .site-select{width:auto;min-width:150px}
.hp-disc-toggle .site-select{width:auto;min-width:132px}
.hp-disc-foot{grid-template-columns:minmax(0,1fr)}
.hp-disc-recreate{min-width:0}
@media (max-width:760px){.hp-disc-recreate .site-select{flex:1 1 100%;max-width:100%}}

/* Analyze (public/hosted/analyze.js): private breakdowns of one ad. */
.hp-an-head h1{margin:0 0 10px;font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;line-height:1.1}
.hp-an-head p{margin:0 0 22px;color:var(--muted);max-width:62ch;line-height:1.55}
.hp-an-composer{display:grid;gap:12px;max-width:760px;padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.hp-an-side{display:grid;gap:12px;align-content:center;min-width:0}
/* On the full-width stage: the drop zone on the left, the link, Analyze and tips on the right, edge to edge with the
   Breakdowns grid. Narrow stages (Stormy open, phones) keep one column. */
.hp-an-page{container-type:inline-size}
@container (min-width:821px){
 .hp-an-composer{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 24px;padding:20px}
 .hp-an-composer .hp-an-drop{align-content:center;min-height:100%;box-sizing:border-box}
 .hp-an-composer .hp-an-or::before{display:none}
 .hp-an-composer .hp-an-or span{color:var(--text);font-weight:600}
 .hp-an-side>p{max-width:62ch}
}
.hp-an-drop{display:grid;justify-items:center;gap:8px;padding:34px 20px;border:1.5px dashed var(--line);border-radius:16px;text-align:center;cursor:pointer;color:var(--muted);transition:border-color .15s ease,background .15s ease}
.hp-an-drop svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hp-an-drop strong{color:var(--text);font-size:16px}
.hp-an-drop small{max-width:46ch;line-height:1.5}
.hp-an-drop:hover,.hp-an-drop.is-over{border-color:var(--accent);background:rgba(255,138,31,.05)}
.hp-an-drop.has-file{border-style:solid;border-color:var(--insight)}
.hp-an-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.hp-an-or::before,.hp-an-or::after{content:"";flex:1;height:1px;background:var(--line)}
#brandSurface .hp-an-link,#brandSurface .hp-an-field textarea{box-sizing:border-box;width:100%;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text)}
.hp-an-more summary{cursor:pointer;color:var(--muted);font-size:14px}
.hp-an-more[open]{display:grid;gap:10px}
.hp-an-field{display:grid;gap:6px;margin-top:10px}.hp-an-field>span{font-size:13px;font-weight:600}
.hp-an-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hp-an-progress.is-busy i{width:35%!important;animation:hp-an-busy 1.2s ease-in-out infinite}
@keyframes hp-an-busy{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){.hp-an-progress.is-busy i{animation:none;width:100%!important;opacity:.5}}
.hp-an-history{margin-top:38px;display:grid;gap:14px}
.hp-an-history h2{margin:0}
.hp-an-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.hp-an-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-decoration:none;transition:border-color .15s ease}
.hp-an-card:hover{border-color:var(--accent)}
.hp-an-thumb{position:relative;display:block;width:64px;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:#05070b}
.hp-an-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-an-linkmark{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted)}
.hp-an-card-body{display:grid;gap:4px;min-width:0}
.hp-an-card-body strong{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-an-card-body small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-an-result{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:28px;align-items:start}
.hp-an-media{position:sticky;top:calc(var(--app-top,90px) + 12px);display:grid;justify-items:start}
.hp-an-media>img{width:auto;max-width:100%;max-height:calc(100dvh - var(--app-top,90px) - 120px);border-radius:16px;object-fit:contain}
.hp-an-linkcard{display:grid;gap:8px;padding:22px;background:var(--panel)}
.hp-an-linkcard a{overflow-wrap:anywhere}.hp-an-linkcard small{color:var(--muted);line-height:1.5}
.hp-an-body{display:grid;gap:20px;min-width:0}
.hp-an-body h1{margin:6px 0 12px;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1.15}
.hp-an-body h2{margin:0 0 10px;font-size:16px}
.hp-an-actions{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:860px){.hp-an-result{grid-template-columns:1fr}.hp-an-media{position:static}.hp-an-media>:is(video,img){max-height:62vh}}

/* Phones: the header is one row (logo and profile; the footer nav shows the workspace, and a pinned pill below the header opens the workspace panel). On chat pages
   the pane fills the screen and scrolls under the frosted header and nav, so nothing is cut off at either end, and
   the chat box floats 8px above the nav. --hp-dock-h is the chat box's height, set by app.js. The pane has no fade
   mask here: a mask clips fixed descendants too, which cut off the chat box's right edge. */
@media (max-width:760px){
 html body>header{flex-wrap:nowrap;min-height:0;padding:8px 10px 8px 13px}
 html body>header .workspace-switch{display:none}
 .hp-toasts{bottom:92px}
 html:has(.hp-chat-page) main{padding-top:0!important;padding-bottom:0}
 html:has(.hp-chat-page) .ws-main{-webkit-mask-image:none;mask-image:none;padding-top:calc(var(--app-top,70px) + 28px);scroll-padding-top:calc(var(--app-top,70px) + 28px);
  padding-bottom:calc(var(--hp-dock-h,110px) + 104px);scroll-padding-bottom:calc(var(--hp-dock-h,110px) + 104px)}
 html:has(.hp-chat-page) .assist-docked .assist-composer{position:fixed;z-index:30;left:8px;right:8px;bottom:88px;margin:0;
  border:1px solid var(--hp-glass-line);border-radius:22px;background:var(--hp-glass-strong);
  -webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);box-shadow:var(--hp-glass-edge),0 10px 30px rgba(0,0,0,.35)!important}
 html:has(.hp-chat-page) .hp-toasts{bottom:calc(var(--hp-dock-h,110px) + 100px)}
}
@media (max-width:760px) and (prefers-reduced-transparency:reduce){html:has(.hp-chat-page) .assist-docked .assist-composer{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Versions header: Make it with AI leads; on phones the buttons take their own row. */
#make-ai{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#make-ai svg{width:16px;height:16px;fill:currentColor;stroke:none}
.ecom-section-head:has(#make-ai){flex-wrap:wrap;row-gap:12px}
.ecom-section-head:has(#make-ai) h2{white-space:nowrap}
@media (max-width:760px){.ecom-section-head:has(#make-ai) .hp-actions{width:100%;flex-wrap:wrap}.ecom-section-head:has(#make-ai) .hp-actions>*{flex:1 1 auto;justify-content:center}}

/* Workspace panel (tablets and phones, where it slides in): the pill that opens it stays pinned just below the header,
   and the panel itself is frosted glass, a little narrower than the studio's. */
@media (max-width:960px){
 /* Sticky offsets count from the scroller's padding edge, which already clears the header by 28px (main and the
    phone chat pane both pad by --app-top + 28px): -20px pins the pill 8px below the header. */
 html .ws-drawer-toggle{position:sticky;top:-20px;z-index:20;align-self:flex-start;width:fit-content;max-width:100%;background:var(--hp-glass);
  -webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);border-color:var(--hp-glass-line);box-shadow:var(--hp-glass-edge),0 8px 22px rgba(0,0,0,.3)}
 /* Just the icon in a circle; the workspace name stays as the button's accessible name. */
 html .ws-drawer-toggle{flex:none;justify-content:center;width:42px;height:42px;min-height:0;padding:0;border-radius:50%}
 html .ws-drawer-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 html .ws-sidebar{width:min(272px,80vw);background:rgba(16,19,25,.55);-webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);
  border-right:1px solid var(--hp-glass-line);box-shadow:var(--hp-glass-edge),18px 0 50px rgba(0,0,0,.35)}
 html .ws-sidebar .ws-card{background:color-mix(in srgb,var(--text) 4.5%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
 html .ws-scrim:not([hidden]){background:rgba(3,5,9,.28)}
}
/* Phones: the circle is fixed (it never shifts while the chat scrolls), 8px under the header and in line with its left
   edge. Out of the flow, it leaves the page 34px of room so the first content starts just below it. */
@media (max-width:760px){
 html .ws-drawer-toggle{position:fixed;top:calc(var(--app-top,70px) + 8px);left:8px;margin:0}
 html .ws-layout:not(.is-discover) .ws-main>#brandSurface{margin-top:34px}
}
@media (max-width:960px) and (prefers-reduced-transparency:reduce){html .ws-sidebar,html .ws-drawer-toggle{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Stormy panel: LabMade's chat panel and rail (studio .ws-chat-panel / .tool-* styles), frosted like the other glass
   surfaces. The thread scrolls inside the panel and the chat box sits at its foot. */
/* The panel's frost sits on a layer behind its content, not on the panel itself: Chrome won't let the chat box's own
   blur reach the thread through a frosted parent. */
html .ws-chat-panel.hp-stormy-panel{isolation:isolate;background:transparent;border-color:var(--hp-glass-line);box-shadow:var(--hp-glass-edge),0 18px 40px rgba(0,0,0,.22)}
html .ws-chat-panel.hp-stormy-panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--hp-glass-strong);-webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);pointer-events:none}
@media (min-width:1101px){html .hp-stormy-panel{height:var(--stormy-h,calc(100dvh - var(--app-top,90px) - 44px));max-height:none}}
.hp-stormy-panel .chat-panel-head{gap:2px;border-bottom:0}
.hp-stormy-title{flex:1;min-width:0;display:grid;gap:1px}
.hp-stormy-title .tool-title{font-size:14px}
.hp-stormy-title small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-stormy-host,.hp-stormy-body,.hp-stormy{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.hp-stormy-host{padding:0 12px;overflow-x:hidden}
/* The panel only ever scrolls vertically: long links and wide card content wrap or clip instead. */
.hp-stormy .assist-thread{overflow-x:hidden;overscroll-behavior-x:none}
.hp-stormy .assist-thread :is(p,a,strong,small,li,code){overflow-wrap:anywhere}
:where(.hp-stormy .assist-thread)>*{max-width:100%;min-width:0}
.hp-stormy{position:relative;margin:0}
/* The chat box floats over the thread on frosted glass, so cards slide behind it as the thread scrolls. The thread fades out
   under the box's lower half, so card edges never show beside its rounded corners. --dock-h is
   the box's height (set in renderChat), which the thread keeps clear at its foot. */
.hp-stormy .assist-thread{flex:1 1 0;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;padding:14px 0 calc(var(--dock-h,120px) + 22px) 0;gap:14px;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 12px - var(--dock-h,120px)*0.5 - 18px),transparent calc(100% - 12px - var(--dock-h,120px)*0.5 + 10px));mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 12px - var(--dock-h,120px)*0.5 - 18px),transparent calc(100% - 12px - var(--dock-h,120px)*0.5 + 10px))}
.hp-stormy .hp-stormy-hello{padding-bottom:calc(var(--dock-h,120px) + 22px)}
.hp-stormy .assist-composer{position:absolute;z-index:3;left:0;right:0;bottom:12px;margin:0;padding:12px 12px 8px 14px;
 background:color-mix(in srgb,var(--panel) 55%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(28px);backdrop-filter:saturate(1.6) blur(28px);
 border-color:color-mix(in srgb,var(--text) 12%,transparent);box-shadow:0 12px 32px -12px #0000008c,inset 0 1px 0 #ffffff0f}
@media (prefers-reduced-transparency:reduce){.hp-stormy .assist-composer{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}
.hp-stormy .assist-composer textarea#assistInput{height:auto;font-size:15px}
.hp-stormy .assist-composer textarea#assistInput::placeholder{color:var(--muted);opacity:.45}
.hp-stormy-hello{margin:auto 0 0;padding:16px 4px 4px;color:var(--muted);font-size:13.5px;line-height:1.5}
.hp-stormy .assist-you{max-width:92%}
.hp-stormy .hp-proposal{max-width:none}
.hp-stormy .hp-vid-settings{grid-template-columns:1fr 1fr}
.hp-stormy .hp-vid-settings label:nth-child(3){grid-column:1/-1}
.hp-stormy .hp-chat-ads{max-width:92%}
/* Discover and Analyze have no workspace panel, so Stormy takes the second column there. */
@media (min-width:1101px){.ws-layout.is-discover.has-chat{grid-template-columns:minmax(0,1fr) var(--tool-w)!important}}
/* Where the workspace panel slides in, the page is one column and Stormy floats over it (the studio's overlay). */
@media (max-width:960px){.ws-layout.has-chat{grid-template-columns:minmax(0,1fr)}}
/* Phones: open, Stormy spans the same width as the bottom nav; collapsed, it's LabMade's round button centred above it. */
@media (max-width:760px){.ws-layout:not(.chat-collapsed) .hp-stormy-panel{right:8px;width:auto;left:8px}}
/* Pages follow the width they actually get (the Stormy panel narrows them), not just the window's. */
#brandSurface{container-type:inline-size}
@container (max-width:760px){
 .hp-concept,.hp-framework{grid-template-columns:1fr;gap:24px}
 .hp-concept-preview{position:static}
 .hp-framework-preview{position:static;display:grid;justify-items:center}
 .hp-brief-cards{grid-template-columns:1fr}
}
/* Left panel lists (wide screens): they scroll inside their cards, settle on whole rows, and fade at the foot while
   more rows are below. Their height is set to whole rows by fitSideLists() in app.js. */
@media (min-width:961px){
 /* The studio's .ws-side-projects ul{overflow:visible} wins over its own list scrolling, so Recent creatives was only
    clipped by its card, never scrollable. */
 #wsSidebar .ws-side-list{overflow-y:auto;scroll-snap-type:y proximity}
 #wsSidebar .ws-side-list>li{scroll-snap-align:start}
 #wsSidebar .ws-side-list.has-more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)}
}
/* Phones: Stormy's collapsed button sits at the bottom right, above the nav (the studio centres it). */
@media (max-width:760px){html .ws-layout.chat-collapsed .ws-chat-panel.hp-stormy-panel{left:auto;right:12px;transform:none}}
/* Up next titles end in an ellipsis instead of running past the card */
.ws-upnext li button span>b{font-weight:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Static and carousel layout wireframes: the frame is the ad's own canvas, so it stays light like a proof sheet
   (most pack shots are on white), with ink type, the accent for badges and a dark button. */
.lw-frame{display:block;width:100%;height:auto;font-family:inherit;border-radius:10px;box-shadow:0 1px 0 #ffffff14,0 10px 28px -12px #000000b3}
.lw-bg{fill:#f5f6f8}
.lw-head{fill:#121722;font-weight:700;letter-spacing:-.02em}
.lw-body{fill:#3b4556;font-weight:500}
.lw-number{fill:#121722;font-weight:800;letter-spacing:-.04em}
.lw-list text{fill:#121722;font-size:4.2px;font-weight:600}
.lw-list circle{fill:var(--accent)}
.lw-badge rect{fill:var(--accent)}
.lw-badge text{fill:#1a0f02;font-weight:800}
.lw-cta rect{fill:#121722}
.lw-cta text{fill:#fff;font-weight:700}
.lw-empty rect{fill:#e7eaef;stroke:#b9c1cd;stroke-width:.5;stroke-dasharray:1.6 1.2}
.lw-empty text{fill:#6b7585;font-size:5px;font-weight:600}
.lw-frame.is-on-photo .lw-head,.lw-frame.is-on-photo .lw-body{fill:#fff;paint-order:stroke;stroke:#000000a6;stroke-width:.9px;stroke-linejoin:round}
.lw-single{width:min(100%,240px)}
.lw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.lw-cards li{display:grid;gap:5px;min-width:0}
.lw-cards li>span{font-size:12px;color:var(--muted);text-align:center}
.hp-proposal .lw-single,.hp-proposal .lw-cards{margin:4px 0 2px}
.hp-concept-preview.has-layout #preview{width:min(100%,300px);margin-inline:auto}
.hp-concept-preview.has-layout #preview .lw-cards{grid-template-columns:repeat(2,1fr)}
.hp-layouts{margin-top:28px}
.hp-layout-stage .lw-single{width:150px}
.hp-layout-stage .lw-cards{width:min(100% - 24px,250px);grid-template-columns:repeat(3,1fr);gap:6px}
.hp-layout-stage .lw-cards li:nth-child(n+4){display:none}
.hp-layout-stage .lw-cards li>span{font-size:10px}
.hp-layout-preview .lw-single{width:min(100%,320px);margin-inline:auto}
.hp-brief .lw-single{width:260px}
@media print{.lw-frame{box-shadow:none;border:1px solid #ccd}}
/* Settings: workspace name, members and invites */
.hp-settings-block h3{margin:14px 0 0;font-size:14px;font-weight:600;color:var(--muted)}
.hp-inline-form{display:flex;flex-wrap:wrap;align-items:end;gap:10px}
.hp-inline-form .ecom-field{flex:1 1 220px;margin:0}
.hp-inline-form .ecom-field:has(select){flex:0 0 140px}
.hp-members{display:grid;margin:0;padding:0;list-style:none}
.hp-members li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.hp-members li:last-child{border-bottom:0}
.hp-member-who{display:flex;align-items:center;gap:10px;min-width:0}
.hp-member-who>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-member-who em{color:var(--muted);font-style:normal}
.hp-members select{min-width:110px}
.profile-avatar.is-pending{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.hp-ws-new{max-width:440px}
.client-quick-menu .client-quick-new{color:var(--accent)}
@media (max-width:560px){.hp-members li{grid-template-columns:minmax(0,1fr) auto}.hp-members li>:nth-child(3){grid-column:1/-1;justify-self:start}}
.hp-inline-form :is(input,select){height:44px;box-sizing:border-box}
/* Chat page on wider screens: a fixed-height column. The thread scrolls inside it and the composer sits under it,
   so the composer never moves and new messages and cards always land above it. (Phones keep the frosted pane that
   scrolls under the header and nav, with the composer fixed above the nav.) */
@media (min-width:761px){
 html:has(.hp-chat-page) main{overflow:hidden}
 html:has(.hp-chat-page) .app-footer{display:none}
 html .hp-chat-page{height:calc(100dvh - var(--hp-chat-top,140px));min-height:0;padding-bottom:0}
 html .hp-chat-page .assist-docked{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
 html .hp-chat-page .assist-docked .assist-thread{flex:1 1 0;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;padding:14px 6px 18px 2px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px);mask-image:linear-gradient(to bottom,transparent 0,#000 16px)}
 html .hp-chat-page .assist-docked .assist-composer{position:relative;bottom:auto;flex:none;margin:6px 0 20px}
}
/* The chat's name, pinned at the top right of the chat column. */
.hp-chat-page>.hp-chat-title{align-self:flex-end;flex:none;display:flex;align-items:center;gap:4px;max-width:min(72%,560px);min-height:34px;margin:0 0 6px}
.hp-chat-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700;letter-spacing:-.01em}
.hp-chat-rename{display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.hp-chat-rename:hover,.hp-chat-rename:focus-visible{background:var(--raised);color:var(--text)}
.hp-chat-rename svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hp-chat-title-form input{width:min(420px,60vw);height:34px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font:inherit;font-size:15px;font-weight:700;text-align:right}
.hp-chat-page>.hp-chat-context{flex:none;margin:0 0 6px}
/* Status words swap with a short fade, so the change reads as progress. */
#assistStatus{display:inline-block;transition:opacity .17s ease,transform .17s ease}
#assistStatus.is-swapping{opacity:0;transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){#assistStatus{transition:none}}
/* Sidebar dot while something is generating: the dot with a soft ring that keeps expanding. */
.ws-side-nav button.has-busy::after{content:"";flex:none;width:7px;height:7px;margin-left:auto;border-radius:50%;background:var(--accent);animation:hp-busy 1.5s ease-out infinite}
.side-collapsed .ws-side-nav button.has-busy::after{position:absolute;top:6px;right:8px;margin:0}
.ws-drawer-toggle.has-busy::after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:hp-busy 1.5s ease-out infinite}
@keyframes hp-busy{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}75%,100%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}}
.hp-live-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:hp-busy 1.5s ease-out infinite}
.hp-todo-dot{flex:none;width:8px;height:8px;border-radius:50%;border:2px solid var(--muted)}
@media (prefers-reduced-motion:reduce){.ws-side-nav button.has-busy::after,.ws-drawer-toggle.has-busy::after,.hp-live-dot{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}}
/* Overview: the chat box on top, then what's happening. */
.hp-overview{display:grid;align-content:start;gap:44px;box-sizing:border-box;max-width:1680px;margin-inline:auto;width:100%;padding-inline:clamp(0px,2.4vw,44px);container-type:inline-size}
.hp-overview .home-greeting h1{font-size:clamp(40px,3.6vw,56px);letter-spacing:-.04em}
.hp-overview .home-greeting{margin:8px 0 0}
.hp-ov-composer{margin:0}
.hp-ov-suggestions{margin:0}
.hp-ov-section{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.hp-ov-section h2{margin:0;font-size:15px;font-weight:600;color:var(--muted)}
.hp-ov-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.hp-ov-head a{font-size:13px;color:var(--muted)}
.hp-ov-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.hp-ov-list :is(a,button){display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:border-color var(--motion-fast,.15s) ease,background var(--motion-fast,.15s) ease}
.hp-ov-list :is(a,button):hover{border-color:color-mix(in srgb,var(--text) 22%,var(--line));background:var(--raised)}
.hp-ov-list span{display:grid;gap:2px;min-width:0}
.hp-ov-list strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}
.hp-ov-list small{color:var(--muted);font-size:12px}
.hp-ov-chats{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.hp-ov-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
.hp-ov-stats div{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.hp-ov-stats dt{font-size:12px;color:var(--muted)}
.hp-ov-stats dd{margin:4px 0 0;font-size:26px;font-weight:700;letter-spacing:-.03em}
.hp-ov-stats dd a{color:var(--text)}
#brandSurface .hp-ov-stats dd a{color:var(--text)}
@media (max-width:760px){.hp-ov-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Concept phone: generating, then the latest version playing; a small toggle back to the storyboard. */
.hp-preview-gen{position:relative;width:fit-content;margin-inline:auto}
.hp-preview-gen .hp-phone-screen>*{opacity:.28;filter:saturate(.6)}
.hp-preview-gen-over{position:absolute;inset:6px;display:grid;place-content:center;justify-items:center;gap:6px;padding:16px;border-radius:17px;background:linear-gradient(180deg,#0b122066,#0b1220cc);text-align:center}
.hp-preview-gen-over .hp-render-shimmer{width:104px;margin-bottom:8px;border-radius:14px}
.hp-preview-gen-over strong{font-size:14px}
.hp-preview-gen-over small{font-size:12px;color:var(--muted)}
.hp-phone.is-media .hp-phone-screen{position:relative;padding:0;background:#000}
.hp-phone.is-media :is(video,img){width:100%;height:100%;object-fit:cover;display:block}
.hp-phone-open{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border:0;border-radius:11px;background:#000000a6;color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#brandSurface .hp-phone-open .hp-code{font-size:11px!important;padding:2px 6px}
.hp-preview-toggle{display:flex;justify-content:center;gap:4px;margin:10px auto 0;padding:3px;width:fit-content;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.hp-preview-toggle button{padding:5px 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.hp-preview-toggle button[aria-pressed="true"]{background:var(--raised);color:var(--text)}
.hp-preview-toggle[hidden]{display:none}
/* AI images: the card's layout preview, results, the full-size view */
.hp-img-layout{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center}
.hp-img-layout .lw-single,.hp-img-layout .lw-cards{width:120px;margin:0}
.hp-img-layout .lw-cards{grid-template-columns:1fr}
.hp-img-layout .lw-cards li:nth-child(n+2){display:none}
.hp-render-set.is-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.hp-render-wait.is-image .hp-render-shimmer{aspect-ratio:4/5}
.hp-render-image{display:block;width:min(100%,320px);padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--raised);cursor:zoom-in}
.hp-render-image img{display:block;width:100%;height:auto}
.hp-render-set.is-cards .hp-render-image{width:100%}
.hp-btn-link{display:inline-flex;align-items:center;text-decoration:none}
.hp-lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:#000000d9;cursor:zoom-out}
.hp-lightbox img{max-width:min(100%,1100px);max-height:calc(100dvh - 48px);border-radius:12px;box-shadow:0 30px 80px #000}
.hp-lightbox-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border:0;border-radius:50%;background:#ffffff1f;color:#fff;font-size:24px;cursor:pointer}
/* Create page: the form on the left, the gallery beside it (stacked on narrow screens) */
.hp-create{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:28px;align-items:start}
.hp-create-form{position:sticky;top:0;display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.hp-create-form .ecom-field{margin:0}
.hp-create-form textarea{min-height:96px}
.hp-seg{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--bg);width:fit-content}
.hp-seg button{padding:7px 16px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-weight:600;cursor:pointer}
.hp-seg button[aria-checked="true"]{background:var(--raised);color:var(--text)}
.hp-create-gallery{display:grid;gap:12px;min-width:0}
.hp-create-gallery h2{margin:0;font-size:15px;font-weight:600;color:var(--muted)}
.hp-create-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.hp-create-tile{display:grid;gap:8px;align-content:start;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--panel);min-width:0}
.hp-create-tile .hp-render-image{width:100%}
.hp-create-tile .hp-render-video{width:100%;border-radius:12px}
.hp-create-tile .hp-render-wait{grid-template-columns:1fr;justify-items:center;text-align:center}
.hp-create-tile .hp-render-wait .hp-render-shimmer{width:100%}
.hp-create-tile .assist-card-actions{flex-wrap:wrap}
.hp-create-meta{display:grid;gap:6px;min-width:0}
.hp-create-meta p{margin:0;font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-create-save select{width:100%;font-size:13px}
.hp-create-empty{grid-column:1/-1;padding:28px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);text-align:center}
@media (max-width:900px){.hp-create{grid-template-columns:1fr}.hp-create-form{position:static}}
/* Concept page: carousel card images in order */
.hp-card-strip-wrap{display:grid;gap:8px;margin:6px 0 14px}
.hp-card-strip-wrap h3{margin:0;font-size:15px}
.hp-card-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.hp-card-strip li{display:grid;gap:4px;justify-items:start}
.hp-card-strip button{width:100%;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--raised);cursor:zoom-in}
.hp-card-strip img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.hp-card-strip span{font-size:12px;color:var(--muted)}

/* Create page: stack the form over the gallery whenever the page area is narrow (e.g. with Stormy's panel open). */
.hp-create-page{container-type:inline-size}
@container (max-width:880px){.hp-create{grid-template-columns:1fr}.hp-create-form{position:static}}
.hp-create-gallery .hp-ov-head{flex-wrap:wrap}
.hp-create-tile :is([data-chat-say],[data-chat-fill]){display:none}
/* A still in the phone fits whole (a 4:5 ad isn't cropped to the phone's 9:16); videos still fill it. */
.hp-phone.is-media img{object-fit:contain;background:#000}

/* The side panel's card titles stay on one line, including mid-glide. */
#wsSidebar .ws-side-head h2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The model menu opens downward when the composer sits too close to the header for it to fit above (Overview). */
.assist-bar .assist-model.is-below .assist-menu{top:calc(100% + 8px);bottom:auto;transform-origin:top right;animation-name:assist-menu-down}
@keyframes assist-menu-down{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.assist-bar .assist-model.is-below .assist-menu{animation:none}}

/* Stormy's main buttons: orange, with the spark centred beside the label. */
.hp-stormy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.hp-stormy-btn svg{flex:none;width:16px;height:16px;fill:currentColor;stroke:none}

/* Offer page: the product leads, with its photo, name, one-line description, link, counts and the Stormy button. */
.hp-offer-hero{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:center;margin:0 0 26px}
.hp-offer-photo{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;padding:0;border:1px solid var(--line);border-radius:22px;background:radial-gradient(80% 70% at 50% 40%,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel));overflow:hidden;cursor:pointer}
.hp-offer-photo img{width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box}
.hp-offer-photo .hp-offer-mark{width:64px;height:64px;border-radius:18px;font-size:22px}
.hp-offer-photo:focus-visible{outline:2px solid var(--focus,#0a84ff);outline-offset:2px}
.hp-offer-hero-body{display:grid;gap:10px;min-width:0}
#brandSurface .hp-offer-what{box-sizing:border-box;width:100%;resize:none;font:inherit;font-size:16px;line-height:1.5;color:var(--muted);background:none!important;border:1px solid transparent!important;border-radius:10px;padding:4px 6px;margin-left:-7px;min-height:1.5em;box-shadow:none}
#brandSurface .hp-offer-what:hover{border-color:var(--line)!important}
#brandSurface .hp-offer-what:focus{border-color:var(--focus)!important;color:var(--text);outline:none}
.hp-offer-stats{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none;min-height:30px}
.hp-offer-stats li>*{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;text-decoration:none;font-variant-numeric:tabular-nums}
.hp-offer-stats li>button,.hp-offer-stats li>a{cursor:pointer}
.hp-offer-stats li>button:hover,.hp-offer-stats li>a:hover{border-color:color-mix(in srgb,var(--text) 25%,var(--line))}
.hp-offer-hero .hp-actions{margin-top:4px}
@media (max-width:640px){.hp-offer-hero{grid-template-columns:96px minmax(0,1fr);align-items:start}.hp-offer-photo{border-radius:16px}.hp-offer-photo .hp-offer-mark{width:44px;height:44px;font-size:16px}.hp-offer-hero .hp-actions{grid-column:1/-1}}

/* Brand page and brand cards: colour swatches. */
.hp-brand .hp-doc-meta{margin:0 0 16px}
.hp-swatch{display:block;width:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff26}
.hp-swatches{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 0;padding:0;list-style:none}
.hp-swatches li{display:inline-flex;align-items:center;gap:6px}
.hp-swatches code{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.hp-swatch-pick,.hp-swatch-add{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.hp-swatch-pick input,.hp-swatch-add input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.hp-swatch-add{min-height:30px;padding:0 12px 0 8px;border:1px dashed var(--line);border-radius:999px;color:var(--muted);font-size:13px}
.hp-swatch-add svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.hp-swatch-add:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 30%,var(--line))}
.hp-swatch-pick:focus-within,.hp-swatch-add:focus-within{outline:2px solid var(--focus,#0a84ff);outline-offset:2px;border-radius:9px}
.hp-colors{cursor:default}

/* Settings: two-up selects, usage meters, the month's spending table, Stormy's approval choice, coming connections. */
.hp-settings-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 6px}
.hp-settings-row .ecom-field{margin:0;min-width:0}
.hp-settings-row select{width:100%}
.hp-usage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hp-usage-item{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.hp-usage-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hp-usage-head span{color:var(--muted);font-variant-numeric:tabular-nums}
.hp-usage-item small{color:var(--muted);font-size:12.5px}
.hp-meter{display:block;width:100%;height:6px}
.hp-meter-track{fill:var(--raised)}
.hp-meter-fill{fill:var(--accent)}
.hp-meter-fill.is-high{fill:#e5684f}
.hp-table-wrap{overflow-x:auto;margin:8px 0 0;border:1px solid var(--line);border-radius:14px}
.hp-spend{width:100%;border-collapse:collapse;font-size:13.5px}
.hp-spend th{padding:10px 12px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.hp-spend td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.hp-spend tr:last-child td{border-bottom:0}
.hp-spend td small{display:block;color:var(--muted);font-size:12px}
.hp-spend .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hp-choice-group{display:grid;gap:8px;margin:14px 0 0;padding:0;border:0}
.hp-choice-group legend{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--muted)}
.hp-choice-group .hp-choice{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);cursor:pointer}
.hp-choice-group .hp-choice:has(input:checked){border-color:var(--accent)}
.hp-choice-group .hp-choice input{margin:3px 0 0;accent-color:var(--accent)}
.hp-choice-group .hp-choice span{display:grid;gap:2px}
.hp-choice-group .hp-choice small{color:var(--muted);font-size:13px}
.hp-choice-group:disabled .hp-choice{cursor:default;opacity:.75}
.hp-connections{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.hp-connections li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.hp-connections li span:nth-child(2){display:grid;gap:2px;min-width:0}
.hp-connections small{color:var(--muted);font-size:13px}
.hp-conn-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--raised);font-weight:700;color:var(--muted)}
.hp-connections button.is-on{border-color:var(--accent);color:var(--accent)}
@media (max-width:640px){.hp-settings-row,.hp-usage{grid-template-columns:1fr}.hp-connections li{grid-template-columns:auto minmax(0,1fr)}.hp-connections li button{grid-column:1/-1;justify-self:start}}

/* Small thumbnails for made images and videos (the Recent drawer's Just made list). */
.hp-tool-wait{display:grid;place-items:center;height:100%;font-size:12px;color:var(--muted)}
.hp-tool-failed{color:var(--danger,#ff453a)}
.hp-tool-mini{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;overflow:hidden;background:var(--raised);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent)}
.hp-tool-mini img,.hp-tool-mini video{width:100%;height:100%;object-fit:cover;display:block}
.hp-tool-mini .hp-tool-wait{font-size:9px}

/* New test as a matchup: versions face off in an arena, the hypothesis is one sentence, length is a preset. */
.hp-mu{display:grid;gap:16px}
.hp-mu-offer{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;color:var(--muted)}
.hp-mu-select select{font-weight:600;max-width:min(520px,80vw)}
.hp-mu-arena{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;padding:24px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 90%,#fff 3%),var(--panel))}
.hp-mu-arena.is-many{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hp-mu-arena.is-many .hp-mu-vs{display:none}
.hp-mu-side{display:grid;justify-items:center;gap:10px;min-width:0}
.hp-mu-letter{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.hp-mu-side.is-a .hp-mu-letter{color:var(--accent)}
.hp-mu-phone{position:relative;display:grid;place-items:center;width:min(200px,100%);aspect-ratio:9/16;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#05070b}
.hp-mu-phone :is(img,video){width:100%;height:100%;object-fit:cover}
.hp-mu-phone em{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:7px;background:#000000b8;color:#fff;font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal}
.hp-mu-phone>span{padding:0 16px;color:var(--muted);font-size:13px;text-align:center}
.hp-mu-side.is-empty .hp-mu-phone{border-style:dashed;background:transparent}
.hp-mu-meta{margin:0;text-align:center;min-width:0}
.hp-mu-meta strong{display:block;font-size:15px}
.hp-mu-meta small{color:var(--muted);font-size:13px}
.hp-mu-vs{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#1a1108;font-weight:900;font-size:17px;box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 14%,transparent)}
.hp-mu-tray{display:flex;flex-wrap:wrap;gap:8px}
.hp-mu-tray button{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.hp-mu-tray button:hover{border-color:color-mix(in srgb,var(--text) 25%,var(--line))}
.hp-mu-tray .hp-test-thumb{width:34px}
.hp-mu-tray small{display:block;color:var(--muted);font-size:12px}
.hp-mu-card{padding:22px 24px;border:1px solid var(--line);border-radius:22px;background:var(--panel);min-width:0}
.hp-mu-card h2{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--muted)}
.hp-mu-sentence{margin:0;font-size:clamp(19px,2.3vw,25px);line-height:1.9;letter-spacing:-.015em;font-weight:500}
.hp-mu-slot select{max-width:100%;padding:2px 30px 2px 12px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:10px;background-color:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--text);font:inherit;font-size:.8em;font-weight:700}
.hp-mu-slot.is-b select{border-color:var(--line);background-color:var(--raised)}
.hp-mu-because input{width:min(420px,100%);padding:2px 4px;border:0;border-bottom:1.5px dashed color-mix(in srgb,var(--text) 30%,transparent);background:transparent;color:var(--text);font:inherit;font-size:.8em}
.hp-mu-because input:focus{outline:none;border-bottom-color:var(--accent)}
.hp-mu-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0}
.hp-mu-chips>span{color:var(--muted);font-size:13px;margin-right:4px}
.hp-mu-chip{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:13.5px;cursor:pointer}
.hp-mu-chip[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
.hp-mu-other{min-width:200px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text);font:inherit;font-size:13.5px}
.hp-mu-how{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.hp-mu-seg{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.hp-mu-seg button{padding:8px 14px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.hp-mu-seg button[aria-pressed="true"]{background:var(--raised);color:var(--text)}
.hp-mu-when{margin:10px 0 0;color:var(--muted);font-size:13.5px}
.hp-mu-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.hp-mu-dates .ecom-field{margin:0}
.hp-mu-target{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.hp-mu-target label{color:var(--muted);font-size:14px}
.hp-mu-money{display:flex;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.hp-mu-money:focus-within{border-color:var(--accent)}
.hp-mu-money input{width:96px;padding:10px 12px;border:0;background:transparent;color:var(--text);font:inherit;font-variant-numeric:tabular-nums}
.hp-mu-money input+input{width:58px;border-left:1px solid var(--line);text-transform:uppercase;color:var(--muted)}
.hp-mu-money input:focus{outline:none}
.hp-mu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.hp-mu-foot p{margin:0;color:var(--muted);font-size:14px;max-width:62ch}
.hp-mu-foot b{color:var(--text);font-weight:600}
.hp-mu :is(button,select,input):focus-visible{outline:2px solid var(--focus,#0a84ff);outline-offset:2px}
@media (max-width:760px){.hp-mu-arena{grid-template-columns:1fr 1fr;padding:16px;gap:12px}.hp-mu-vs{grid-column:1/-1;grid-row:1;justify-self:center;width:44px;height:44px;font-size:14px}.hp-mu-how{grid-template-columns:1fr}.hp-mu-card{padding:18px}}
@media (prefers-reduced-motion:no-preference){.hp-mu-vs{animation:hp-mu-pulse 2.8s ease-in-out infinite}@keyframes hp-mu-pulse{50%{box-shadow:0 0 0 14px color-mix(in srgb,var(--accent) 5%,transparent)}}}

/* Results reuse the studio's cards, fields and typography. */
.hp-results-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hp-results-form>.hp-actions,.hp-results-form>label:first-child{grid-column:1/-1}
.hp-results-form input{width:100%;box-sizing:border-box}
.hp-results-scroll{overflow-x:auto;margin:16px 0}.hp-results-table{width:100%;border-collapse:collapse;font-size:13px}
.hp-results-table th,.hp-results-table td{padding:12px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid #ffffff14;font-variant-numeric:tabular-nums}
.hp-results-table th:first-child{text-align:left}.hp-results-table thead{color:#a5adba}.hp-results-table tbody th{font-weight:500}
.hp-results-ad{border:1px solid #ffffff16;border-radius:14px;padding:20px;margin:14px 0;background:#13171d}
.hp-results-ad h3{margin-top:0}.hp-results-ad p{overflow-wrap:anywhere}.hp-results-ad details{margin:15px 0}
.hp-results-history{list-style:none;padding:0}.hp-results-history li{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #ffffff14;padding:14px 0}
.hp-results-empty{padding:30px;border:1px dashed #ffffff20;border-radius:14px;color:#a5adba}
.hp-results-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}
#test-evidence{border-top:1px solid #ffffff20;padding-top:24px;margin-top:24px}#save-learning{display:grid;gap:16px}#save-learning textarea{width:100%;box-sizing:border-box}
@media(max-width:600px){.hp-results-form{grid-template-columns:1fr}.hp-results-heading{display:block}.hp-results-ad{padding:12px}}

/* Simplified navigation (19 Oct): no outer rail. One workspace panel with four destinations, section tabs above each
   page, recent work behind a disclosure, and Settings in the workspace menu. */
@media(min-width:761px){html body>header{margin-left:14px}html body>main{margin-left:0}}
@media(max-width:760px){html body>main{padding-bottom:28px}}
.hp-ws-menu{display:grid;gap:2px;margin:10px 0 12px}
.hp-ws-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--text);text-decoration:none}
.hp-ws-menu a:hover,.hp-ws-menu a[aria-current]{background:color-mix(in srgb,var(--text) 7%,transparent)}
.hp-ws-menu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* A column of the sidebar's width: long chat titles end in an ellipsis instead of widening the panel. */
.ws-recent{display:flex;flex-direction:column;gap:10px;min-width:0;width:100%}
.ws-recent>*{min-width:0;max-width:100%;box-sizing:border-box}
.ws-recent .ws-side-list li,.ws-recent .ws-side-list button{min-width:0;max-width:100%}
.ws-recent .ws-side-list{overflow-y:auto;overscroll-behavior:contain}
.ws-recent>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border:1px solid var(--hp-glass-line);border-radius:16px;color:var(--muted);font-size:13px;font-weight:600}
.ws-recent>summary::-webkit-details-marker{display:none}
.ws-recent>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.ws-recent[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.ws-recent>summary:hover{color:var(--text)}
.side-collapsed .ws-recent{display:none}
@media (prefers-reduced-motion:reduce){.ws-recent>summary::after{transition:none}}
/* Section tabs scroll sideways on narrow screens; the padding keeps focus rings from being clipped. */
/* Home: start something beside what's in progress, then what's trending in the library. Rows, not boxes. */
.hp-home-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px)}
@media(max-width:900px){.hp-home-cols{grid-template-columns:1fr;gap:24px}}
.hp-home-col{display:grid;align-content:start;gap:6px;min-width:0}
.hp-overview :is(.hp-home-col>h2,.hp-ov-head h2){margin:0 0 8px;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.hp-overview .hp-ov-head{margin-bottom:6px}.hp-overview .hp-ov-head h2{margin:0}.hp-overview .hp-ov-head a{font-size:14px;font-weight:600}
.hp-home-starts{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hp-home-start{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:3px;align-items:center;box-sizing:border-box;padding:16px;border-radius:12px;color:var(--text);text-decoration:none;transition:background .15s ease}
.hp-home-start:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.hp-home-start:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hp-home-start .hp-home-icon{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.hp-home-icon svg{width:20px;height:20px;fill:none;stroke:#ffa65a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hp-home-start strong{font-size:16px}
.hp-home-start small{color:var(--muted);font-size:14px;line-height:1.4}
.hp-home-link .hp-home-link-row{grid-column:2;display:flex;gap:8px;margin-top:6px}
.hp-cont-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hp-cont-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 16px;border-radius:12px;color:var(--text);text-decoration:none;transition:background .15s ease}
.hp-cont-row:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.hp-cont-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hp-cont-thumb{display:grid;place-items:center;width:52px;height:66px;border-radius:10px;overflow:hidden;background:var(--raised)}
.hp-cont-thumb :is(img,video){width:100%;height:100%;object-fit:cover}
.hp-cont-thumb svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hp-cont-text{display:grid;gap:2px;min-width:0}
.hp-cont-text strong{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-cont-text small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.hp-cont-badge{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:#ffb070;font-size:12px;font-weight:600}
.hp-continue-empty{margin:0;padding:18px 16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:14px}
.hp-home-trending{display:grid;gap:10px}
/* One full row of ads at every width: the column count follows the page's width (tiles stay about 150–200px wide)
   and the ads that don't fit that row are left out. */
.hp-home-tiles{--cols:8;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:18px}
@container (max-width:1499px){.hp-home-tiles{--cols:7}.hp-home-tiles>li:nth-child(n+8){display:none}}
@container (max-width:1249px){.hp-home-tiles{--cols:6}.hp-home-tiles>li:nth-child(n+7){display:none}}
@container (max-width:1049px){.hp-home-tiles{--cols:5}.hp-home-tiles>li:nth-child(n+6){display:none}}
@container (max-width:849px){.hp-home-tiles{--cols:4}.hp-home-tiles>li:nth-child(n+5){display:none}}
@container (max-width:649px){.hp-home-tiles{--cols:3}.hp-home-tiles>li:nth-child(n+4){display:none}}
@container (max-width:459px){.hp-home-tiles{--cols:2;gap:12px}.hp-home-tiles>li:nth-child(4){display:block}}
.hp-home-tile{display:grid;gap:8px;color:var(--text);text-decoration:none}
.hp-home-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
.hp-home-tile-art{display:block;aspect-ratio:9/13;border-radius:12px;overflow:hidden;background:#05070b;box-shadow:0 0 0 1px var(--line);transition:box-shadow .15s ease}
.hp-home-tile:hover .hp-home-tile-art{box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 30%,transparent)}
.hp-home-tile-art img{display:block;width:100%;height:100%;object-fit:cover}
.hp-home-tile strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.3}
.hp-home-tile small{color:var(--muted);font-size:13px}
#brandSurface :is(a.hp-home-start,a.hp-cont-row,a.hp-home-tile){color:var(--text)}

/* Results journey */
.hp-journey-steps{margin:0 0 24px;font-size:13px}
.hp-journey-steps li{padding:0;border:0}
.hp-journey-steps a{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:999px;color:var(--muted);text-decoration:none}
.hp-journey-steps li.is-done a{color:var(--text);border-color:color-mix(in srgb,var(--insight,#35d6f5) 45%,var(--line))}
.hp-journey-steps li.is-current{background:none}
.hp-journey-steps li.is-current a{color:var(--bg);background:var(--accent);border-color:var(--accent);font-weight:600}
.hp-step-n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--text) 8%,transparent);font-size:11px;font-weight:700}
.hp-journey-steps li.is-current .hp-step-n{background:rgba(0,0,0,.18)}
/* Test's start: two choice cards. Each foot says where that job stands; the one to do next is outlined in orange and
   carries the button. The whole card is the link. */
.hp-results-starts{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hp-results-starts>li{display:flex;min-width:0}
.hp-results-start{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px;border-radius:16px;
 border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 2.5%,var(--hp-stage,#131417));
 color:var(--text);text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.hp-results-start:hover{border-color:color-mix(in srgb,var(--text) 18%,transparent);background-color:color-mix(in srgb,var(--text) 4%,var(--hp-stage,#131417))}
.hp-results-start.is-next{border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
.hp-results-start.is-next:hover{border-color:color-mix(in srgb,var(--accent) 70%,transparent)}
.hp-results-start:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hp-results-start .hp-home-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
#brandSurface .hp-results-start strong{color:var(--text);font-size:17px;font-weight:650;letter-spacing:-.01em}
.hp-results-start small{color:var(--muted);font-size:14px;line-height:1.45;max-width:52ch;margin-bottom:18px}
.hp-results-start-foot{align-self:stretch;margin-top:auto;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--text) 7%,transparent);
 display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:49px;font-size:13px;color:var(--muted)}
.hp-results-start-go{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;background:var(--accent);color:#160c02;font-weight:650}
#brandSurface .hp-results-start.is-quiet strong{color:var(--muted)}
.hp-results-start.is-quiet .hp-home-icon{background:color-mix(in srgb,var(--text) 6%,transparent)}
.hp-results-start.is-quiet .hp-home-icon svg{stroke:var(--muted)}
.hp-results-waiting{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-top:16px;padding:12px 12px 12px 20px;
 border-radius:14px;border:1px solid rgba(255,138,31,.3);background:rgba(255,138,31,.08)}
.hp-results-waiting p{margin:0;font-size:14px}
@media (prefers-reduced-motion:reduce){.hp-results-start{transition:none}}
.hp-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.hp-badge.is-synthetic{color:#ffd28a;border-color:color-mix(in srgb,#ffb347 50%,var(--line));background:rgba(255,179,71,.08)}
.hp-journey .hp-page-head .hp-actions{align-items:center;flex-wrap:wrap;justify-content:flex-end}
.hp-journey-settings{margin:4px 0 8px;align-items:center}
.hp-journey-tests{list-style:none;margin:0;padding:0}
.hp-journey-test{display:grid;gap:4px;color:var(--text);text-decoration:none}
.hp-journey-test:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.hp-journey-test small{color:var(--muted)}
.hp-match-row{display:flex;flex-wrap:wrap;align-items:end;gap:12px}
.hp-match-row .ecom-field{flex:1 1 280px;margin:0}
.hp-results-ad.is-matched{opacity:.82}
.hp-results-details{margin-top:18px}.hp-results-details>summary{cursor:pointer;color:var(--muted);padding:8px 0}
.hp-evidence-notes{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.hp-evidence-notes li{padding:10px 12px;border-left:3px solid var(--line);background:color-mix(in srgb,var(--text) 3%,transparent);border-radius:0 10px 10px 0;font-size:13px}
.hp-evidence-notes li.is-ok{border-left-color:var(--accent)}
.hp-evidence-notes strong{margin-right:6px}
[aria-disabled="true"].primary{opacity:.45;pointer-events:none}
@media(max-width:760px){.hp-results-starts{grid-template-columns:1fr}.hp-journey-steps{flex-wrap:nowrap;overflow-x:auto;margin:-6px -4px 20px;padding:6px 4px;scrollbar-width:none}.hp-journey-steps a{white-space:nowrap}}
.hp-home-start strong,.hp-continue-card strong,.hp-journey-test strong{color:var(--text)}
/* The studio colours every link in #brandSurface orange; buttons-as-links and these pills keep their own colours. */
#brandSurface a.primary,#brandSurface a.primary:hover{color:#0a0c10}
#brandSurface .hp-journey-steps a{color:var(--muted)}
#brandSurface .hp-journey-steps li.is-done a{color:var(--text)}
#brandSurface .hp-journey-steps li.is-current a{color:#0a0c10}
#brandSurface :is(.hp-home-start,.hp-continue-card,.hp-journey-test){color:var(--text)}
.hp-menu-switch{display:none}
@media(max-width:760px){.hp-menu-switch{display:grid;gap:6px;margin:10px 0 0;font-size:12px;color:var(--muted)}.hp-menu-switch select{width:100%}}
.hp-journey-settings{flex-wrap:wrap}
#brandSurface.hp-journey{min-width:0}
.hp-evidence-notes li{overflow-wrap:anywhere}
/* The comparison table scrolls inside its box instead of widening the page. */
.hp-journey :is(.hp-section,#test-evidence,#journey-body),#test-evidence{min-width:0;max-width:100%}
.hp-results-scroll{max-width:100%}
.hp-disc-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Tutorial mode: the welcome tour (spotlight ring + anchored card) and each page's ? note */
.hp-tour-back{position:fixed;inset:0;z-index:90;background:transparent;transition:background .2s ease}
.hp-tour-back.is-dim{background:rgba(5,7,10,.62)}
.hp-tour-ring{position:fixed;z-index:91;border-radius:14px;border:2px solid var(--accent);box-shadow:0 0 0 9999px rgba(5,7,10,.62),0 0 24px color-mix(in srgb,var(--accent) 45%,transparent);pointer-events:none;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease}
.hp-tour-pop{position:fixed;z-index:92;width:min(340px,calc(100vw - 24px));box-sizing:border-box;padding:18px 18px 14px;border:1px solid var(--hp-glass-line);border-radius:18px;background:var(--hp-glass-strong);-webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);box-shadow:0 24px 60px rgba(0,0,0,.45);color:var(--text);animation:hp-tour-in .22s ease}
.hp-tour-pop.is-center{left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 24px))}
.hp-tour-pop h2{margin:2px 0 8px;font-size:18px;letter-spacing:-.02em}
.hp-tour-pop p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.hp-tour-pop .hp-tour-count{margin:0;color:var(--accent);font-size:12px;font-weight:700}
.hp-tour-actions{display:flex;align-items:center;gap:8px;margin-top:16px}
.hp-tour-spacer{flex:1}
@keyframes hp-tour-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hp-tour-ring,.hp-tour-back{transition:none}.hp-tour-pop{animation:none}}
.hp-menu-tags{display:flex;gap:6px;margin:6px 0 0}
.hp-help{position:relative;flex:none;margin-left:auto}
.hp-help-btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.hp-help-btn:hover,.hp-help-btn[aria-expanded="true"]{color:var(--text);border-color:color-mix(in srgb,var(--text) 30%,var(--line))}
.hp-help-btn.is-new{border-color:var(--accent);color:var(--accent)}
.hp-help-btn.is-new::after{content:"";position:absolute;top:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.hp-help-text{position:absolute;z-index:30;top:calc(100% + 8px);right:0;width:min(340px,calc(100vw - 32px));box-sizing:border-box;margin:0;padding:12px 14px;border:1px solid var(--hp-glass-line,var(--line));border-radius:14px;background:var(--panel);color:var(--muted);font-size:13px;line-height:1.5;box-shadow:0 12px 32px rgba(0,0,0,.28);outline:none;animation:hp-tour-in .16s ease}
@media (prefers-reduced-motion:reduce){.hp-help-text{animation:none}}
.hp-tour-menu{display:grid;gap:8px;margin:0 0 12px;padding-top:10px;border-top:1px solid var(--hp-glass-line)}
.hp-tour-menu small{color:var(--muted);font-size:12px;line-height:1.4}
.hp-switch-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;cursor:pointer}
.hp-switch-row:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.hp-switch-row i{position:relative;width:34px;height:20px;border-radius:999px;background:var(--line);transition:background .2s ease}
.hp-switch-row i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--text);transition:transform .2s ease}
.hp-switch-row[aria-checked="true"] i{background:var(--accent)}
.hp-switch-row[aria-checked="true"] i::after{transform:translateX(14px);background:#0a0c10}
@media (prefers-reduced-motion:reduce){.hp-switch-row i,.hp-switch-row i::after{transition:none}}
#brandSurface a.quiet,#brandSurface a.quiet:hover{color:var(--text)}

/* The C layout: the five places always in view in the header, a place's own pages as tabs on the stage; Stormy's
   column on the left of every page, the page as the stage beside it; recent ads and chats in a drawer from the
   header's clock. Scoped to .hp-frame so it wins over the studio's three-column workspace grid. */
html body>header .workspace-switch{display:none}
/* The header: the logo (Home) on the left, the places centred, the clock and profile on the right. */
html body>header{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
html body>header .header-actions{justify-self:end}
.hp-logo{justify-self:start;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:14px;color:var(--text);text-decoration:none;transition:background .15s ease}
.hp-logo:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.hp-logo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hp-logo .brandmark-logo{width:28px;height:28px}
.hp-logo .brand-wordmark{font-family:var(--font-ui);font-size:21px;font-weight:700;letter-spacing:-.045em}
/* The places: one segmented bar; the place you're in is the raised pill. Orange is kept for actions and the dots. */
.hp-places{display:flex;gap:2px;padding:4px;border:1px solid var(--hp-glass-line);border-radius:999px;background:color-mix(in srgb,var(--text) 6%,transparent);-webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur)}
.hp-places a{position:relative;display:grid;place-items:center;height:34px;padding:0 16px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .15s ease,background .15s ease}
.hp-places a:hover{color:var(--text)}
.hp-places a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hp-places a[aria-current]{color:var(--text);background:color-mix(in srgb,var(--text) 14%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent)}
.hp-places a:is(.has-new,.has-busy)::after{content:"";position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hp-places a.has-busy::after{animation:hp-busy 1.5s ease-out infinite}
/* The stage's tabs: the place's own pages, the current one underlined; ? at the end says what it's for. */
.hp-stage-tabs{display:flex;align-items:center;gap:16px;margin:-8px 0 22px;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--text) 9%,transparent)}
.hp-stage-tabs[hidden]{display:none}
.hp-stage-tab-list{display:flex;gap:24px;min-width:0;overflow-x:auto;scrollbar-width:none}
.hp-stage-tab-list::-webkit-scrollbar{display:none}
.hp-stage-tab-list a{flex:none;padding:12px 0 11px;border-bottom:2px solid transparent;color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .15s ease,border-color .15s ease}
.hp-stage-tab-list a:hover{color:var(--text)}
.hp-stage-tab-list a[aria-current]{color:var(--text);border-bottom-color:var(--accent)}
.hp-stage-tab-list a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
/* The place's ? sits in the stage's top-right corner, out of the tab row (which keeps room for it). */
html .hp-frame .ws-main:has(>.hp-stage-tabs:not([hidden])){position:relative}
.hp-stage-tabs:has(.hp-place-help){padding-right:44px}
.hp-place-help{position:absolute;top:12px;right:12px;z-index:5;flex:none}
.hp-place-help .hp-help{margin:0}
.hp-place-help .hp-help-btn.is-new::after{box-shadow:0 0 0 2px #131417}
@media (max-width:760px){.hp-place-help{top:10px;right:10px}}
.hp-recent-btn{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid var(--hp-glass-line);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.hp-recent-btn:hover,.hp-recent-btn[aria-expanded="true"]{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.hp-recent-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hp-recent-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html .header-actions{gap:10px}
/* A top-level page keeps only its actions, on the right, above the work. */
.hp-place-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.hp-place-actions .hp-actions{margin:0}
@media (prefers-reduced-motion:reduce){.hp-places a::after{animation:none}.hp-places a,.hp-stage-tab-list a{transition:none}}

/* Columns: Stormy, then the stage. Stormy is always open on wide screens: a plain column, not a card, with one
   hairline between it and the page. Narrower, it's an overlay behind one round button. */
html .ws-layout.hp-frame{--tool-w:clamp(300px,24vw,380px);grid-template-columns:minmax(0,1fr)!important;gap:clamp(18px,2vw,28px)}
.hp-frame .hp-stormy-panel .tool-body{border:0}
.hp-stormy-panel .chat-panel-head{min-height:48px;padding:8px 8px 6px 16px}
.hp-stormy-panel .hp-stormy-host{padding:0 12px}
.hp-stormy-panel .hp-stormy-title{display:flex;align-items:baseline;justify-content:flex-start;gap:0}
.hp-stormy-panel .hp-stormy-title .tool-title{flex:none}
.hp-stormy-panel .hp-stormy-title small{flex:0 1 auto;min-width:0;margin:0 0 0 8px;text-align:left}
.hp-stormy-panel .hp-stormy-title small::before{content:"·";margin-right:8px;color:var(--muted)}
.hp-stormy-panel .hp-stormy-title small:empty::before{content:none}
.hp-stormy-fab{display:none}
@media (min-width:1101px){
 html .ws-layout.hp-frame.has-chat{grid-template-columns:var(--tool-w) minmax(0,1fr)!important}
 /* A rounded glass card, like the header above it: same radius, hairline and edge light. */
 html .hp-frame .ws-chat-panel.hp-stormy-panel{border:1px solid var(--hp-glass-line);border-radius:20px;overflow:hidden;box-shadow:var(--hp-glass-edge),0 18px 40px rgba(0,0,0,.22)}
 .hp-frame .hp-stormy-close{display:none}
}
@media (max-width:1100px){
 html .hp-frame .ws-chat-panel.hp-stormy-panel{display:none;left:8px;right:auto;top:calc(var(--app-top,90px) + 8px);bottom:8px;width:min(400px,calc(100vw - 16px));z-index:65;border:1px solid var(--hp-glass-line);border-radius:20px;overflow:hidden}
 html .hp-frame.stormy-open .ws-chat-panel.hp-stormy-panel{display:flex;animation:hp-stormy-in .22s cubic-bezier(.2,.8,.2,1)}
 html .hp-frame .ws-chat-panel.hp-stormy-panel::before{background:color-mix(in srgb,var(--panel) 97%,#000);-webkit-backdrop-filter:none;backdrop-filter:none}
 .hp-stormy-fab{position:fixed;z-index:64;left:auto;right:16px;bottom:16px;width:auto;max-width:none;margin:0;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 16px;border:1px solid var(--hp-glass-line);border-radius:999px;
  background:var(--hp-glass-strong);-webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);box-shadow:var(--hp-glass-edge),0 12px 30px rgba(0,0,0,.4);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
 .hp-stormy-fab svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .hp-stormy-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
 body:has(.hp-frame.stormy-open) .hp-stormy-fab{display:none}
}
@media (max-width:760px){html .hp-frame .ws-chat-panel.hp-stormy-panel{right:8px;width:auto;top:calc(var(--app-top,70px) + 6px)}}
@keyframes hp-stormy-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html .hp-frame.stormy-open .ws-chat-panel.hp-stormy-panel{animation:none}}
@media (prefers-reduced-transparency:reduce){.hp-stormy-fab{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Dots: pulsing while something generates, steady when something finished (red if it failed). */
.hp-recent-btn{position:relative}
:is(.hp-recent-btn,.hp-stormy-fab):is(.has-busy,.has-done,.has-failed)::after{content:"";position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
:is(.hp-recent-btn,.hp-stormy-fab).has-busy::after{animation:hp-busy 1.5s ease-out infinite}
:is(.hp-recent-btn,.hp-stormy-fab).has-failed::after{background:var(--danger)}
/* What's generating, at the top of Stormy's column. */
.hp-activity-strip{position:relative;margin:0 12px 8px}
.hp-activity-strip a{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--hp-glass-line);border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent);color:var(--text);font-size:13px;text-decoration:none}
.hp-activity-strip a:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.hp-activity-strip a>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-activity-time{color:var(--muted);font-variant-numeric:tabular-nums}
.hp-activity-strip.is-failed a{padding-right:38px;border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.hp-activity-x{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.hp-activity-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hp-activity-x:hover{color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent)}
/* The drawer's Just made list. */
.hp-made a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;color:var(--text);text-decoration:none}
.hp-made a:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.hp-made strong{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-made small{color:var(--muted);font-size:12px}
.hp-made>a>span:last-child{min-width:0}

/* Recent work: a solid rounded card that drops from the header's clock (top right), not a drawer from the left. */
html .hp-frame .ws-sidebar.hp-drawer{position:fixed;z-index:60;top:calc(var(--app-top,90px) + 8px);right:16px;bottom:auto;left:auto;width:min(360px,calc(100vw - 32px));height:auto;max-height:calc(100dvh - var(--app-top,90px) - 24px);
 display:flex;flex-direction:column;gap:12px;padding:16px 12px 14px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--hp-glass-line);border-radius:20px;
 background:color-mix(in srgb,var(--panel) 97%,#000);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--hp-glass-edge),0 24px 60px rgba(0,0,0,.5);
 transform-origin:top right;opacity:0;transform:translateY(-6px) scale(.98);visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1),visibility 0s linear .18s}
html .hp-frame .ws-sidebar.hp-drawer.is-open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
/* An invisible click-catcher: clicking anywhere else closes the card. */
.hp-frame .ws-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:55;background:transparent}
@media (max-width:760px){html .hp-frame .ws-sidebar.hp-drawer{right:8px;width:calc(100vw - 16px);top:calc(var(--app-top,70px) + 6px)}}
.hp-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}
.hp-drawer-head h2{margin:0;font-size:15px;letter-spacing:-.01em}
.hp-drawer .ws-new-chat{min-height:36px;border:1px solid var(--hp-glass-line);border-radius:999px;padding:0 12px;font-size:13px}
.hp-drawer .ws-card{background:color-mix(in srgb,var(--text) 4.5%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
.hp-drawer .ws-side-list{max-height:none;overflow:visible}
@media (prefers-reduced-motion:reduce){html .hp-frame .ws-sidebar.hp-drawer{transition:none}}
@media (prefers-reduced-transparency:reduce){html .hp-frame .ws-sidebar.hp-drawer,.hp-places{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Stormy's empty column: one line, then (on Home) things to ask for. */
.hp-stormy div.hp-stormy-hello p{margin:0 0 12px}
.hp-stormy .hp-stormy-hello .assist-suggestions{grid-template-columns:1fr;gap:8px;margin:0}
.ws-layout.hp-frame:not(.is-home) .hp-stormy-hello .assist-suggestions{display:none}
.hp-stormy .hp-stormy-hello .assist-suggestion{min-height:0;padding:11px 14px;border-radius:14px;background:color-mix(in srgb,var(--text) 3.5%,transparent)}

/* Library: one row (search, Filters, Sort, More) over the full-width grid; the filters are a drawer at every width. */
html .hp-disc{grid-template-columns:minmax(0,1fr)}
html .hp-disc-filters{position:fixed;inset:0 auto 0 0;top:0;z-index:92;width:min(340px,88vw);max-height:none;height:100%;border-radius:0 18px 18px 0;background:var(--hp-glass-strong);
 transform:translateX(-104%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
html .hp-disc-filters.is-open{transform:none;visibility:visible;transition:transform .25s ease}
html .hp-disc-scrim:not([hidden]){position:fixed;inset:0;z-index:91;background:rgba(0,0,0,.5)}
/* Wide screens: the filters take over Stormy's column (same card); the chat waits underneath. */
html #stormyPanel .hp-disc-filters.is-docked{position:absolute;inset:0;z-index:6;width:auto;height:auto;max-height:none;transform:none;visibility:visible;transition:none;
 display:flex;flex-direction:column;gap:14px;padding:16px 16px 0;border-radius:inherit;background:#1a1c1f;overflow-y:auto;overscroll-behavior:contain}
html #stormyPanel.has-filters #stormyBody{visibility:hidden}
.hp-disc-stormy{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.hp-disc-stormy:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.hp-disc-stormy:focus-visible{outline:2px solid var(--focus,#35d6f5);outline-offset:2px}
.hp-disc-stormy svg{width:32px;height:32px;padding:7px;box-sizing:border-box;border-radius:10px;background:color-mix(in srgb,var(--accent) 20%,transparent);fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round}
.hp-disc-stormy span{display:grid;gap:2px}
.hp-disc-stormy b{font-size:13.5px;font-weight:600}
.hp-disc-stormy small{font-size:12px;color:var(--muted)}
.hp-disc-ffoot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:auto -16px 0;padding:12px 16px;border-top:1px solid var(--line);background:inherit;font-size:13px}
html .hp-disc-filters:not(.is-docked) .hp-disc-ffoot{margin-inline:-14px;padding-inline:14px;background:var(--hp-glass-strong)}
.hp-disc-ffoot b{font-variant-numeric:tabular-nums}
.hp-disc-ffoot button:disabled{opacity:.4;cursor:default}
@media (prefers-reduced-motion:reduce){.hp-disc-stormy{transition:none}}
html .hp-disc-filter-btn{display:inline-flex!important;align-items:center;gap:7px;height:42px;min-height:0;padding:0 16px;border-radius:999px}
/* The studio styles every details element (18px top margin, 10px text); menus here are controls, not disclosures. */
.hp-more{margin:0;font-size:inherit;color:inherit}
html .hp-disc-bar{align-items:center}
#brandSurface .hp-disc-sort .site-select-trigger,#brandSurface .hp-disc-sort select{height:42px;min-height:0;border-radius:999px;padding:0 14px 0 16px}
html .hp-disc-close{display:inline}
.hp-disc-filter-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hp-disc-fcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#0a0c10;font-size:12px;font-weight:700}
.hp-disc-fcount[hidden]{display:none}
.hp-more{position:relative;flex:none}
.hp-more>summary{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;list-style:none;cursor:pointer;color:var(--muted)}
.hp-more>summary::-webkit-details-marker{display:none}
.hp-more>summary:hover,.hp-more[open]>summary{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.hp-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hp-more>summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.hp-more-panel{position:absolute;z-index:40;top:calc(100% + 8px);right:0;display:grid;gap:4px;min-width:220px;padding:8px;border:1px solid var(--hp-glass-line);border-radius:16px;background:var(--hp-glass-strong);
 -webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);box-shadow:var(--hp-glass-edge),0 18px 44px rgba(0,0,0,.45)}
.hp-more-panel .hp-segment{margin:0 0 4px}
.hp-more-item{display:block;width:100%;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.hp-more-item:hover,.hp-more-item:focus-visible{background:color-mix(in srgb,var(--text) 7%,transparent);outline:none}
@media (prefers-reduced-motion:reduce){html .hp-disc-filters{transition:none}}
@media (prefers-reduced-transparency:reduce){.hp-more-panel{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Narrower screens: the profile keeps only its initials, then the logo only its mark; phones get the places as a
   bar along the bottom, with the stage and Stormy's button clear of it. */
@media (max-width:900px){html body>header #profileLabel,html body>header #profileLabel+span{display:none}}
@media (max-width:760px){.hp-logo .brand-wordmark{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (max-width:640px){
 html body>header{grid-template-columns:minmax(0,1fr) auto}
 .hp-places{position:fixed;z-index:60;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));background:var(--hp-glass-strong);box-shadow:0 12px 30px rgba(0,0,0,.4)}
 .hp-places a{flex:1 1 0;min-width:0;height:40px;padding:0 4px;font-size:13px}
 html .hp-stormy-fab{bottom:calc(72px + env(safe-area-inset-bottom))}
 html .hp-frame .ws-chat-panel.hp-stormy-panel{bottom:calc(64px + env(safe-area-inset-bottom))}
 .hp-toasts{bottom:calc(128px + env(safe-area-inset-bottom))}
 .hp-stage-tab-list{gap:20px}
}
/* An open menu in the header sits above Stormy's overlay and the drawers. */
html body>header:has(details[open]){z-index:95}

/* Home's "Create an ad" asking for the link in place, and the chat box's one-time glow when something is handed to it. */
.hp-home-link{display:grid;gap:10px;align-content:start}
.hp-home-link-row{display:flex;gap:8px;min-width:0}
.hp-home-link-row input{flex:1;min-width:0;height:40px;padding:0 14px;border:1px solid var(--hp-glass-line);border-radius:999px;background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);font:inherit;font-size:14px}
.hp-home-link-row input:focus{outline:2px solid var(--accent);outline-offset:1px}
.hp-home-link-row input[aria-invalid=true]{border-color:var(--danger)}
.hp-home-link-row button{height:40px;min-height:0;padding:0 18px;border-radius:999px}
@keyframes hp-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.hp-stormy .assist-composer.is-glow{animation:hp-glow .7s ease-out}
@media (prefers-reduced-motion:reduce){.hp-stormy .assist-composer.is-glow{animation:none;outline:2px solid var(--accent)}}
/* Brand bible: the store link and Analyze my store on one row; a long bible card folds after its first sections. */
.hp-store-row{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.hp-store-row .hp-url-input{flex:1 1 auto;min-width:0;height:44px;padding:0 16px;border:1px solid var(--hp-glass-line);border-radius:999px;background:color-mix(in srgb,var(--text) 4%,transparent);color:var(--text);font:inherit;font-size:15px}
.hp-store-row .hp-url-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.hp-store-row .hp-stormy-btn{height:44px;min-height:0;padding:0 18px;border-radius:999px;white-space:nowrap}
.hp-store-row .hp-save{flex:none}
.hp-store-note{margin:0 0 18px}
.hp-diff-more{margin:6px 0 0;font-size:inherit;color:inherit}
.hp-diff-more>summary{cursor:pointer;padding:6px 0;color:var(--muted);font-size:13px;font-weight:600;list-style:none}
.hp-diff-more>summary::-webkit-details-marker{display:none}
.hp-diff-more>summary:hover{color:var(--text)}
@media (max-width:640px){.hp-store-row{flex-wrap:wrap}.hp-store-row .hp-url-input{flex-basis:100%}}
/* Empty bible sections read as hints, not as saved text. */
#brandSurface .hp-brand textarea::placeholder{color:var(--muted);opacity:.55}

/* ── Graphite frame, rimmed stage ────────────────────────────────────────────────────────────────────────────────
   The frame (toolbar row and Stormy's column) is plain graphite, a step lighter than the stage; the work sits on one
   slightly darker rounded stage that scrolls on its own: a faint dot grid and one thin orange-to-cyan line along its
   top edge. Both are the stage's own background, so they stay put while the page scrolls. */
:root{--hp-frame:#1a1c1f;--hp-stage:#131417}
html:root[data-theme="dark"]{background:var(--hp-frame)}
body:not(.hp-bare) .hp-aurora{display:none}
html body::after{display:none!important}
/* The toolbar row: no card, on the background. */
html body>header{margin:0!important;padding:10px 16px 8px 18px!important;min-height:58px!important;height:auto;border:0!important;border-radius:0!important;
 background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
html body>header .profile-menu summary{background:transparent}

/* Below the toolbar: Stormy's column and the stage fill the window; only the stage and Stormy's thread scroll. */
html main{margin:0!important;padding:0 8px 8px 8px!important;overflow:hidden!important}
html .ws-layout.hp-frame{height:100%;align-items:stretch;gap:8px}
html .hp-frame>.ws-main{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:22px clamp(16px,2vw,32px) 48px;
 border-radius:16px;border:1px solid color-mix(in srgb,var(--text) 7%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent);
 background:linear-gradient(90deg,rgba(255,138,31,0),#ff8a1f 25%,#35d6f5 75%,rgba(53,214,245,0)) 32px 0/calc(100% - 64px) 1px no-repeat,
  radial-gradient(1px 1px at 1px 1px,rgba(238,241,245,.06) 1px,transparent 0) 0 0/20px 20px,var(--hp-stage);
 /* Sticky bits inside pages count from the stage's top now, not the window's. */
 --app-top:0px}
/* Pages under the stage tabs fill the stage like the Library: flush with the tab row, starting at the tabs' own gap.
   Home keeps its own layout; pages without tabs (settings, new workspace) keep the centred form column. */
html .hp-frame .ws-main:has(>.hp-stage-tabs:not([hidden]))>#brandSurface.ecom-page:not(.hp-overview){max-width:none;margin:0;padding:0 0 64px}
@media (min-width:1101px){
 /* Stormy sits on the background itself: no card, its chat box a glass rounded box at the foot. */
 html .hp-frame .ws-chat-panel.hp-stormy-panel{position:relative;top:auto;height:100%;max-height:none;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
 html .hp-frame .ws-chat-panel.hp-stormy-panel::before{display:none}
 html .hp-frame .hp-stormy-panel .chat-panel-head{padding:4px 4px 8px 10px}
 html .hp-frame .hp-stormy-panel .hp-stormy-host{padding:0 2px 0 4px}
}
/* On the graphite frame the chat box and suggestions are raised a step, not glass. */
html #stormyPanel .hp-stormy .assist-composer{background:#25282d;border:1px solid #34383e;-webkit-backdrop-filter:none;backdrop-filter:none}
html #stormyPanel .hp-stormy .hp-stormy-hello .assist-suggestion{background:#212428;border-color:#2e3237}
/* Buttons in the chat's cards are pills. */
html #stormyPanel :is(.hp-proposal,.hp-choices,.assist-choices) :is(button,.hp-btn-link){border-radius:999px}
html #stormyPanel .hp-choices .hp-choice{border-radius:14px;background:#212428;border-color:#2e3237}
html #stormyPanel .hp-choices .hp-choice:not(:disabled):is(:hover,:focus-visible){border-color:color-mix(in srgb,var(--accent) 70%,#2e3237);background:#262220}
html #stormyPanel .hp-choices .hp-choice.is-picked{border-color:var(--accent);background:#2a231d}
/* …except the video picker's logo tiles and version rows, which keep their own shapes. */
html #stormyPanel .hp-proposal .hp-vfam button{border-radius:14px}html #stormyPanel .hp-proposal .hp-vver button{border-radius:10px}
@media (max-width:760px){
 html body>header{padding:8px 10px 6px 12px!important;min-height:52px!important}
 html main{padding:0 6px 6px!important}
 html .hp-frame>.ws-main{border-radius:14px;padding:16px 12px 96px}
}
/* Phones: the stage stops above the places bar. */
@media (max-width:640px){html main{padding-bottom:calc(64px + env(safe-area-inset-bottom))!important}}
/* Stormy's column edge: drag to resize. A faint grip at mid-height says it moves; on hover and while dragging the edge
   lights as a hairline in the stage rim's colours, orange at the top to cyan, as if the rim turned the corner.
   Overlay widths (≤1100px) have no edge. */
.hp-col-handle{display:none}
@media (min-width:1101px){
 .hp-col-handle{display:block;position:absolute;top:0;bottom:0;right:-10px;z-index:5;width:12px;cursor:col-resize;touch-action:none}
 .hp-col-handle::before{content:"";position:absolute;top:32px;bottom:32px;left:5px;width:1px;
  background:linear-gradient(180deg,rgba(255,138,31,0),#ff8a1f 25%,#35d6f5 75%,rgba(53,214,245,0));opacity:0;transition:opacity .15s ease}
 .hp-col-handle::after{content:"";position:absolute;top:50%;left:4px;width:4px;height:40px;margin-top:-20px;border-radius:4px;background:color-mix(in srgb,var(--text) 16%,transparent);transition:background .15s ease}
 .hp-col-handle:hover::before{opacity:.5}
 body.hp-resizing .hp-col-handle::before{opacity:1}
 .hp-col-handle:hover::after,body.hp-resizing .hp-col-handle::after{background:transparent}
 .hp-col-handle:focus-visible{outline:none}
 .hp-col-handle:focus-visible::before{opacity:1}
}
body.hp-resizing,body.hp-resizing *{cursor:col-resize!important;user-select:none!important;-webkit-user-select:none!important}
/* The column follows the pointer directly while dragging; keys and reset keep the usual ease. */
html body.hp-resizing .ws-layout.hp-frame{transition:none}
@media (prefers-reduced-motion:reduce){.hp-col-handle::before,.hp-col-handle::after{transition:none}}
@media (max-width:640px){.hp-overview{gap:32px}.hp-overview .home-greeting h1{font-size:34px}}
/* Loading: FuelStorm's mark. A faint outline of the mark stays put; the orange bolt, then the white one a beat later,
   glide in and settle into it, hold with a soft orange glow, then speed out and fade fully before they reset, so the
   jump back to the start is never seen. It appears only after a moment so quick loads never flash it; a load
   still going after 30 s adds one quiet line. Transform and opacity only. */
.hp-loader{display:grid;justify-items:center;align-content:center;gap:16px;min-height:min(56vh,480px);opacity:0;animation:hp-loader-in .3s ease .25s forwards}
.hp-loader.is-small{min-height:0;padding:28px 0}
/* The page loader, while it's all the page has: the stage stacks as a column so it centres in the space under the tabs. */
html .hp-frame>.ws-main:has(>#brandSurface>.hp-loader:only-child){display:flex;flex-direction:column}
html .hp-frame>.ws-main>#brandSurface.ecom-page:not(.hp-overview):has(>.hp-loader:only-child){flex:1;display:grid;width:100%;box-sizing:border-box;padding-bottom:0}
/* The mark sits on the stage's centre: nudged up by half the tab row's extra height, with the slow-connection line
   hanging below it instead of pushing it up. */
html .hp-frame>.ws-main>#brandSurface>.hp-loader:only-child{position:relative;min-height:0;transform:translateY(-16px)}
html .hp-frame>.ws-main>#brandSurface>.hp-loader:only-child .hp-loader-slow{position:absolute;top:calc(50% + 44px);left:0;right:0;max-width:none;text-align:center}
.hp-loader-mark{position:relative;display:block;width:56px;height:56px}
.hp-loader.is-small .hp-loader-mark{width:30px;height:30px}
.hp-loader-mark::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(255,138,31,.28),rgba(255,138,31,0) 62%);opacity:0;will-change:opacity;animation:hp-loader-glow 1.8s ease-in-out infinite}
/* Each bolt is a separate layer moved with transform and opacity only, which the compositor animates by itself. */
.hp-bolt,.hp-bolt-ghost{position:absolute;inset:0}
.hp-bolt{will-change:transform,opacity;backface-visibility:hidden}
:is(.hp-bolt,.hp-bolt-ghost) svg{display:block;width:100%;height:100%;overflow:visible}
.hp-bolt-ghost{opacity:.12}
.hp-bolt-ghost path,.hp-bolt-hi path{fill:#f2f3f5}
.hp-bolt-lo path{fill:#ff8a1f}
.hp-loader .hp-bolt{animation:hp-strike 1.8s infinite backwards}
.hp-loader .hp-bolt-hi{animation-delay:.18s}
/* The page's own `.ecom-page p{opacity:1}` would show it at once, so it's matched through the surface too. */
.hp-loader-slow,#brandSurface .hp-loader-slow{margin:0;color:var(--muted);font-size:13px;opacity:0;animation:hp-loader-in .4s ease 30s forwards}
@keyframes hp-loader-in{to{opacity:1}}
/* Distances are a fraction of the mark's size, so the large and small marks move alike. */
@keyframes hp-strike{
 0%{opacity:0;transform:translate3d(-18%,13%,0);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 34%{opacity:1;transform:translate3d(0,0,0)}
 64%{opacity:1;transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.6,0,.8,.35)}
 86%,100%{opacity:0;transform:translate3d(10%,-7%,0)}}
@keyframes hp-loader-glow{0%,16%{opacity:0}42%{opacity:1}66%{opacity:.7}88%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hp-loader{opacity:1}.hp-loader-slow{display:none}.hp-bolt-ghost{display:none}}
/* Home's sections hold their shape while their data arrives: still blocks, no shimmer. */
.hp-skel{display:block;border-radius:8px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.hp-skel-line{height:12px;width:70%;margin:3px 0}
.hp-skel-line.is-short{width:42%}
.hp-skel-row{pointer-events:none}
.hp-home-tile-art.hp-skel{box-shadow:none;border-radius:12px}
/* FuelStorm's video player (player.js): the frame hugs the clip's shape; one quiet bar over its foot. */
.fs-player-stage{display:grid;place-items:center;width:100%;height:100%;min-height:0;box-sizing:border-box;padding:16px;overflow:hidden}
.fs-player{position:relative;overflow:hidden;max-width:100%;border-radius:16px;background:#000;container-type:inline-size}
.fs-player>video{display:block;width:100%;height:100%;object-fit:cover;background:#000;cursor:pointer}
.fs-player>.hp-render-video{max-width:none;max-height:none;border-radius:0}
.fs-player-big{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:rgba(14,15,17,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:opacity .2s ease,transform .2s ease}
.fs-player-big svg{width:26px;height:26px;margin-left:3px;fill:currentColor}
.fs-player.is-started .fs-player-big{opacity:0;transform:scale(.9);pointer-events:none}
.fs-player-bar{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:rgba(14,15,17,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;transition:opacity .25s ease,transform .25s ease}
.fs-player.is-idle .fs-player-bar{opacity:0;transform:translateY(6px)}
.fs-player.is-idle{cursor:none}
.fs-player-bar button{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer}
.fs-player-bar button:hover{background:rgba(255,255,255,.12)}
.fs-player-bar svg{width:18px;height:18px;fill:currentColor}
.fs-player .fs-wave{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fs-scrub{position:relative;flex:1;min-width:40px;height:24px;cursor:pointer;touch-action:none}
.fs-scrub::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.fs-scrub-fill{position:absolute;left:0;top:10px;width:var(--p,0%);height:4px;border-radius:2px;background:var(--accent)}
.fs-scrub-fill::after{content:"";position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;opacity:0;transition:opacity .15s ease}
.fs-scrub:hover .fs-scrub-fill::after,.fs-scrub:focus-visible .fs-scrub-fill::after{opacity:1}
.fs-time{flex:none;padding:0 4px;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.9}
@container (max-width:250px){.fs-time,.fs-full{display:none}}
.fs-player :focus-visible{outline:2px solid var(--focus,#35d6f5);outline-offset:2px}
.fs-mute.is-hint{animation:fs-hint 1.2s ease 2}
@keyframes fs-hint{50%{background:color-mix(in srgb,var(--accent) 45%,transparent)}}
.fs-player:fullscreen{width:100%!important;height:100%!important;border-radius:0}
.fs-player:fullscreen>video{object-fit:contain}
@media (prefers-reduced-motion:reduce){.fs-player-bar,.fs-player-big,.fs-scrub-fill::after{transition:none}.fs-mute.is-hint{animation:none}}
/* The stage's snake glow while AI media renders (app.js syncGlow): a bright segment travels round the frame. */
@property --snake{syntax:'<angle>';inherits:false;initial-value:0deg}
.hp-stage-glow{position:fixed;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s ease;filter:drop-shadow(0 0 6px rgba(255,138,31,.55)) drop-shadow(0 0 14px rgba(53,214,245,.28))}
.hp-stage-glow i{position:absolute;inset:0;padding:2px;box-sizing:border-box;border-radius:inherit;
 background:conic-gradient(from var(--snake),transparent 0 68%,rgba(255,138,31,.15) 74%,#ff8a1f 86%,#ffd2a6 92%,#35d6f5 98%,transparent 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.is-rendering .hp-stage-glow{opacity:1}
html.is-rendering .hp-stage-glow i{animation:fs-snake 4.5s linear infinite}
@keyframes fs-snake{to{--snake:360deg}}
@media (prefers-reduced-motion:reduce){html.is-rendering .hp-stage-glow i{animation:none;background:linear-gradient(120deg,#ff8a1f,#35d6f5);opacity:.55}.hp-stage-glow{transition:none}}
/* Image and video credits left, in the header (app.js refreshCredits). */
.hp-credits{display:inline-flex;align-items:center;gap:6px;flex:none;height:40px;padding:0 14px 0 11px;border:1px solid var(--hp-glass-line);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.hp-credits[hidden]{display:none}
.hp-credits:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.hp-credits:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hp-credits svg{width:15px;height:15px;fill:var(--accent);stroke:none}
.hp-credits b{font-weight:700;font-variant-numeric:tabular-nums}
.hp-credits-word{color:var(--muted)}
.hp-credits.is-low{border-color:color-mix(in srgb,#ffb347 55%,var(--hp-glass-line))}.hp-credits.is-low b{color:#ffb347}
.hp-credits.is-out{border-color:color-mix(in srgb,#ff6b6b 55%,var(--hp-glass-line))}.hp-credits.is-out b{color:#ff8a8a}
.hp-credits.is-none svg{fill:var(--muted)}
@media (max-width:760px){.hp-credits{padding:0 11px 0 9px}.hp-credits-word{display:none}}
@media (prefers-reduced-motion:reduce){.hp-credits{transition:none}}
/* Plans: a chat model the plan leaves out, and the near-limit note in the box. */
.assist-model-option.is-locked{cursor:not-allowed;opacity:.5}
.assist-model-option.is-locked:hover{background:none}
.hp-limit-note{margin:0 0 6px;padding:0 4px;font-size:12.5px;line-height:1.4;color:var(--muted)}
/* Pricing: three plans side by side (stacked on phones), how limits work, and the signed-out page's own header. */
.hp-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.hp-plan{display:grid;grid-template-rows:auto auto 1fr auto;gap:18px;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 32px rgba(0,0,0,.28)}
.hp-plan.is-current{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.hp-plan-head h2{margin:0;font-size:20px;letter-spacing:-.02em}
.hp-plan-head p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.hp-plan-price{display:flex;align-items:baseline;gap:6px;margin:0}
.hp-plan-price strong{color:var(--text);font-size:40px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.hp-plan-price span{color:var(--muted);font-size:13.5px}
.hp-plan-facts{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:14px;align-content:start}
.hp-plan-facts li{display:grid;gap:3px}
.hp-plan-facts strong{font-size:14px;font-weight:600}
.hp-plan-facts small{color:var(--muted);font-size:12.5px;line-height:1.45}
.hp-plan button{width:100%}
.hp-plan button:disabled{opacity:1;color:var(--muted);cursor:default}
.hp-plan-limits{margin-top:32px}
.hp-limit-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.hp-limit-list div{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.hp-limit-list dt{font-weight:600;margin-bottom:6px}
.hp-limit-list dd{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.hp-public{flex:1;overflow-y:auto}
.hp-pricing-public{max-width:1120px;margin:0 auto;padding:40px 32px 64px}
.hp-public-head{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;padding:20px 32px 0}
.hp-public-signin{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;text-decoration:none}
.hp-limits{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.hp-plans,.hp-limit-list,.hp-limits{grid-template-columns:1fr}.hp-public-head{padding:16px 16px 0}.hp-pricing-public{padding:28px 16px 48px}}
/* Thinking: the three dots take the brand's orange, white and cyan, each passing the colours along the row. */
.assist-dots i{background:#ff8a1f;animation:assist-dot 1.2s ease-in-out infinite,hp-dot-hue 1.8s linear infinite}
.assist-dots i:nth-child(2){animation-delay:.15s,-.6s}.assist-dots i:nth-child(3){animation-delay:.3s,-1.2s}
@keyframes hp-dot-hue{0%,100%{background:#ff8a1f}33%{background:#f4f7fc}66%{background:#35d6f5}}
@media (prefers-reduced-motion:reduce){.assist-dots i{animation:none}.assist-dots i:nth-child(2){background:#f4f7fc}.assist-dots i:nth-child(3){background:#35d6f5}}
/* Members: fixed role and action columns, so every row's role select lines up whatever its action says. */
.hp-members.is-roles .site-select,.hp-members.is-roles select{width:100%;min-width:0}
@media (max-width:560px){.hp-members.is-roles li{grid-template-columns:minmax(0,1fr) 116px}}
@media (min-width:561px){.hp-members.is-roles li{grid-template-columns:minmax(0,1fr) 128px 76px}.hp-members.is-roles li>:nth-child(3){justify-self:start}}

/* Chat cards float: a lighter surface than the chat, a hairline edge, a lit top edge and a soft shadow, with
   compact insides (labels beside values, soft claim checks, pill actions, quiet links in a bottom row). */
.assist-card.hp-proposal,.hp-frame .assist-card.hp-proposal,.hp-frame .hp-proposal[data-status="applied"]{gap:10px;padding:14px 16px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:linear-gradient(180deg,#22262d 0%,#1b1e24 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.55),0 14px 30px -10px rgba(0,0,0,.65)}
.hp-proposal .hp-proposal-kind{font-size:11.5px;font-weight:650}
.hp-proposal h3{font-size:15.5px;font-weight:650}
.hp-proposal .hp-proposal-facts{grid-template-columns:84px minmax(0,1fr);gap:6px 12px}
.hp-proposal .hp-proposal-facts>div{display:contents}
.hp-proposal .hp-proposal-facts dt{font-size:12.5px;line-height:1.45}
.hp-proposal .hp-proposal-facts dd{margin:0;font-size:13px;line-height:1.45}
.hp-proposal[data-status="applied"] [data-long],.hp-proposal[data-status="applied"] .hp-brief-beats{display:none}
.hp-proposal .hp-claim-chips{flex-direction:column;gap:6px}
.hp-proposal .hp-claim-chips li{border:0;border-radius:10px;background:rgba(53,214,245,.07);padding:7px 10px;font-size:12.5px}
.hp-proposal .hp-claim-chips li:not(.is-add):not(.is-remove):not(.is-empty)::before{content:'';flex:none;align-self:flex-start;width:13px;height:13px;margin-top:2px;background:var(--insight);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.hp-proposal .hp-claim-chips li.is-add{background:rgba(255,138,31,.08)}
.hp-proposal .hp-claim-chips li.is-remove{background:rgba(255,175,163,.06)}
.hp-proposal .assist-card-actions{gap:6px;padding:2px 0 0}
.hp-proposal .assist-card-actions button.quiet{min-height:32px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);color:var(--text);font-size:12.5px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hp-proposal .assist-card-actions button.quiet:hover{background:rgba(255,255,255,.09)}
.hp-proposal .assist-card-actions button.quiet.is-solid{background:#f4f6f8;color:#111316;border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.hp-proposal .assist-card-actions button.quiet.is-solid:hover{background:#fff}
.hp-proposal .assist-card-actions .primary{min-height:34px;padding:0 16px;border-radius:999px}
.hp-proposal .hp-render-foot{justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);font-size:12px}
.hp-proposal .hp-render-foot>span:first-child{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.hp-proposal .hp-render-foot .hp-code{font-size:12px!important}
.hp-card-links{display:inline-flex;gap:2px}
.hp-card-links .text-button{min-height:28px;padding:0 5px;font-size:12.5px;color:var(--muted)}
.hp-card-links .text-button:hover{color:var(--text)}
.hp-proposal-done.is-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hp-done-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.hp-done-tag svg{width:14px;height:14px;fill:none;stroke:var(--insight);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hp-pill-link{display:inline-flex;align-items:center;min-height:30px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);color:var(--text);font-size:12.5px;font-weight:600;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hp-pill-link:hover{background:rgba(255,255,255,.09);color:var(--text)}
a.hp-pill-link,#brandSurface a.hp-pill-link{color:var(--text)}
/* Settings: full width; an index of the sections beside one column of grouped rows (label left, control right).
   On phones the index becomes a sideways row of pills (with headroom so focus rings aren't clipped). */
html .hp-frame .ws-main>#brandSurface.ecom-page.hp-settings-page{max-width:none;margin:0;padding:38px clamp(16px,4vw,56px) 64px}
.hp-set{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.hp-set-index{flex:0 1 190px;position:sticky;top:24px;display:flex;flex-direction:column;gap:2px}
.hp-set-index button{display:block;width:100%;min-height:36px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.hp-set-index button:hover{color:var(--text)}
.hp-set-index button[aria-current]{background:rgba(255,255,255,.06);color:var(--text);font-weight:600}
.hp-set-body{flex:999 1 560px;min-width:0;max-width:880px;display:flex;flex-direction:column;gap:30px}
.hp-set-sec{scroll-margin-top:24px}
.hp-settings-page .hp-set-h{margin:0 0 10px 4px;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.4;color:var(--muted)}
.hp-settings-page .hp-set-sub{margin:18px 0 8px 4px;font-size:13px;font-weight:600;color:var(--muted)}
.hp-set-sec>.hp-small,.hp-set-sec>.hp-notice{margin:10px 4px 0}
.hp-group{background:linear-gradient(180deg,#1d2026 0%,#191c21 100%);border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px -12px rgba(0,0,0,.65)}
.hp-group>*+*{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.hp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;margin:0;padding:10px 18px;border:0;font-size:14px;box-sizing:border-box}
.hp-row-label{display:grid;gap:2px;min-width:0;padding:0;font-size:14px;color:var(--text)}
.hp-row-label small{color:var(--muted);font-size:12.5px}
.hp-row-control{display:flex;align-items:center;gap:8px;flex:none}
.hp-row-control select,.hp-row-control .site-select{width:240px}
.hp-row-inline input{width:240px;min-height:36px}
.hp-row-meter{display:grid;gap:6px;width:240px;text-align:right;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.hp-group .hp-members li{padding:10px 18px;border-bottom:0}
.hp-group .hp-members li+li{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.hp-group .hp-limits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:14px 18px 18px}
.hp-limit{display:grid;gap:8px}
.hp-limit-head{display:flex;justify-content:space-between;font-size:13px}
.hp-limit-head span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.hp-limit small{color:var(--muted);font-size:12px}
.hp-group.hp-table-wrap{overflow-x:auto}
.hp-group .hp-spend{margin:0}
@media (max-width:860px){
 .hp-set{gap:18px}
 .hp-set-index{position:static;flex:1 1 100%;flex-direction:row;gap:6px;overflow-x:auto;padding-block:6px;margin-block:-6px;scrollbar-width:none}
 .hp-set-index button{width:auto;flex:none;white-space:nowrap;border-radius:999px;background:rgba(255,255,255,.04)}
 .hp-row{flex-wrap:wrap}
 .hp-row-control{flex:1 1 100%;min-width:0}
 .hp-row-control select,.hp-row-control .site-select,.hp-row-inline input,.hp-row-meter{width:100%}
 .hp-row-inline input{flex:1 1 auto;width:auto;min-width:0}
 .hp-row-meter{text-align:left}
 .hp-group .hp-limits{grid-template-columns:1fr}
}

.hp-invite .hp-row-control .site-select,.hp-invite .hp-row-control select{width:120px;flex:none}
@media (max-width:560px){.hp-members.is-pending li>:nth-child(2){grid-column:1/-1;grid-row:2;padding-left:40px;font-size:12.5px}.hp-members.is-pending li>:nth-child(3){grid-column:2;grid-row:1;justify-self:end}.hp-invite .hp-row-control{flex-wrap:wrap}.hp-invite .hp-row-inline input{flex:1 1 100%}.hp-invite .hp-row-control .site-select,.hp-invite .hp-row-control select{flex:1 1 auto;width:auto}}
.hp-group fieldset.hp-choice-group{margin:0;padding:14px 18px}
.hp-group .hp-choice-group legend{float:left;width:100%;margin:0 0 4px;font-size:14px;font-weight:400;color:var(--text)}
.hp-group .hp-choice-group .hp-choice{background:#111316;border-color:rgba(255,255,255,.06)}

@media (max-width:860px){.hp-row.hp-plan-now{flex-wrap:nowrap}.hp-row.hp-plan-now .hp-row-control{flex:none}}

/* ── Making an ad, one tap from anywhere ──────────────────────────────────────────────────────────────────────────
   Folds: longer sections on phones are rows that open on tap (wider screens show them open, without the row). */
.hp-fold>summary{display:none}
.hp-fold>summary::-webkit-details-marker{display:none}
.hp-folds{display:grid;gap:12px}
/* The ad page: the next step sits by the preview. */
.hp-make-next{display:grid;gap:10px;width:100%;max-width:280px;margin:16px auto 0}
.hp-make-next p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.hp-make-next .primary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:14px;font-weight:700}
.hp-make-next .primary svg,.hp-make-bar svg,.hp-make-ico svg,.hp-cc-make svg{width:16px;height:16px;fill:currentColor;flex:none}
.hp-make-next .text-button{justify-self:center;font-size:13px}
.hp-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hp-make-bar{display:none}
/* Your ads: the way to start, first. */
.hp-make-card{display:flex;align-items:center;gap:14px;width:100%;max-width:520px;margin:0 0 18px;padding:14px 16px;border:1px solid var(--accent);border-radius:18px;background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .15s ease}
.hp-make-card:hover,.hp-make-card:focus-visible{background:color-mix(in srgb,var(--accent) 18%,var(--panel))}
.hp-make-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--accent);color:#131417}
.hp-make-ico svg{width:20px;height:20px}
.hp-make-card>span{display:grid;gap:2px}.hp-make-card strong{font-size:16px}.hp-make-card small{font-size:13px;color:var(--muted)}
.hp-cc-make{justify-self:start;display:inline-flex;align-items:center;gap:5px;margin-top:2px;padding:5px 10px;border-radius:999px;background:var(--accent);color:#131417;font-size:12px;font-weight:700}
.hp-cc-make svg{width:12px;height:12px}
/* The offer's title wraps instead of cutting off. */
#brandSurface textarea.hp-title-input{resize:none;overflow:hidden;field-sizing:content;min-height:0}
.hp-offer-what-wrap{display:grid;gap:2px}
.hp-more{justify-self:start;font-size:13px}
@media (prefers-reduced-motion:reduce){.hp-make-card{transition:none}}

@media (max-width:640px){
 /* The page scrolls, not the stage, so Safari and Chrome can tuck their toolbars away. The header stays on top;
    the places bar and Stormy's button stay fixed at the foot. The full chat page keeps its own scroller. */
 html:not(:has(.hp-chat-page)),html:not(:has(.hp-chat-page)) body{height:auto!important;overflow:visible!important}
 html:not(:has(.hp-chat-page)) body{min-height:100dvh}
 html:not(:has(.hp-chat-page)) body>header{position:sticky!important;top:0;z-index:50;background:var(--hp-frame)!important}
 html:not(:has(.hp-chat-page)) main{flex:none;overflow:visible!important}
 html:not(:has(.hp-chat-page)) .ws-layout.hp-frame{height:auto}
 html:not(:has(.hp-chat-page)) .hp-frame>.ws-main{height:auto;min-height:calc(100dvh - 140px);overflow:visible}

 /* Folds as one list of rows. */
 .hp-folds{gap:0;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
 .hp-fold+.hp-fold{border-top:1px solid var(--line)}
 .hp-fold>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;padding:0 16px;font-size:15px;cursor:pointer;list-style:none}
 .hp-fold>summary small{color:var(--muted);font-size:13px}
 .hp-fold>summary small::after{content:"›";display:inline-block;margin-left:6px;transition:transform .15s ease}
 .hp-fold[open]>summary small::after{transform:rotate(90deg)}
 .hp-fold[open]>summary{border-bottom:1px solid var(--line)}
 .hp-fold>:not(summary){margin:0;padding:14px 12px}
 .hp-fold .hp-section>h2,.hp-fold .ecom-section-head>h2,.hp-fold .ecom-brief-intro{display:none}
 .hp-fold .hp-section{margin:0}
 .hp-fold .hp-bcard{background:var(--bg)}

 /* Offer page: photo beside the full name, then what it is, one big button, and the counts as one quiet line. */
 .hp-offer-hero{grid-template-columns:72px minmax(0,1fr);gap:12px 14px;align-items:center;margin-bottom:18px}
 .hp-offer-hero-body{display:contents}
 .hp-offer-photo{grid-row:1/3;border-radius:16px}
 #brandSurface .hp-offer-hero .hp-title-input{grid-column:2;align-self:end;font-size:21px;letter-spacing:-.01em;line-height:1.2;padding:0 4px;margin-left:-5px}
 .hp-offer-hero .hp-doc-meta{grid-column:2;align-self:start}
 #brandSurface .hp-offer-hero .hp-url-input{min-width:0;max-width:100%;padding:0 4px;margin-left:-5px;border-color:transparent!important;background:none!important;font-size:12.5px}
 .hp-offer-hero .hp-save{font-size:12px}
 #brandSurface .hp-offer-hero .hp-title-input{grid-row:1}
 .hp-offer-hero .hp-doc-meta{grid-row:2}
 .hp-offer-what-wrap,.hp-offer-hero .hp-actions,.hp-offer-stats{grid-column:1/-1}
 .hp-offer-what-wrap{grid-row:3}.hp-offer-hero .hp-actions{grid-row:4}.hp-offer-stats{grid-row:5}
 #brandSurface .hp-offer-what{font-size:15px;color:var(--text);opacity:.85}
 #brandSurface .hp-offer-what:not(:focus):not(.is-open){max-height:calc(3em + 8px);overflow:hidden}
 .hp-offer-hero .hp-actions{order:5;margin:0}
 .hp-offer-hero .hp-actions .primary{width:100%;min-height:52px;justify-content:center;border-radius:16px;font-size:16px;font-weight:700}
 .hp-offer-stats{order:6;justify-content:center;gap:4px;min-height:0;margin-top:-4px}
 .hp-offer-stats li>*{min-height:0;padding:0 4px;border:0;background:none;color:var(--muted);font-size:12.5px}
 .hp-offer-stats li+li::before{content:"·";color:var(--muted);margin-right:4px}
 .hp-wide-only{display:none}

 /* Ad page: title first, the preview beside the next step, then folds; the bar stays in reach while scrolling. */
 .hp-concept{gap:16px}
 .hp-concept .hp-concept-body.hp-doc{display:contents}
 .hp-concept-body .hp-doc-head{order:-1;margin:0}
 .hp-concept-preview{grid-template-columns:132px minmax(0,1fr);align-items:center;gap:12px 14px;justify-items:stretch}
 .hp-concept-preview .hp-preview-col{display:grid;gap:8px}
 .hp-concept-preview #preview .hp-phone{width:132px}
 .hp-make-next{margin:0;max-width:none}
 .hp-concept-preview .hp-status-switch{grid-column:1/-1;margin:4px 0 0;max-width:none}
 .hp-concept-preview .hp-status-note{display:none}
 .hp-concept-preview>.hp-actions{grid-column:1/-1}
 .hp-concept-body>.hp-fold{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
 .hp-concept-body>.hp-fold+.hp-fold{border-top:1px solid var(--line);margin-top:-8px}
 .hp-fold-body{display:grid;gap:12px}
 .hp-make-bar:not([hidden]){display:flex;position:fixed;z-index:58;left:8px;right:8px;bottom:calc(68px + env(safe-area-inset-bottom));justify-content:flex-end;padding:8px;border:1px solid var(--hp-glass-line);border-radius:18px;background:var(--hp-glass-strong);-webkit-backdrop-filter:var(--hp-blur);backdrop-filter:var(--hp-blur);box-shadow:0 12px 30px rgba(0,0,0,.4)}
 .hp-make-bar .primary{display:flex;align-items:center;gap:6px;width:100%;justify-content:center;min-height:44px;border-radius:12px;font-weight:700}
 html:has(.hp-make-bar:not([hidden])) .hp-stormy-fab{bottom:calc(132px + env(safe-area-inset-bottom))}
 .ecom-section-head:has(#make-ai) #make-ai{display:none}
 #versions .hp-drop{display:none}

 /* Your ads */
 .hp-make-card{max-width:none}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.hp-fold>summary small::after{transition:none}}

/* Settings › Connections: the Claude and ChatGPT test link */
.hp-mcp{display:grid;gap:10px;padding:12px 18px 16px}
.hp-mcp[hidden]{display:none}
.hp-mcp-label{font-size:12.5px;color:var(--muted)}
.hp-mcp-row{display:flex;gap:8px;flex-wrap:wrap}
.hp-mcp-row input{flex:1 1 240px;min-width:0;min-height:44px;font:12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.hp-mcp-row button{min-height:44px}
.hp-mcp-steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:13px;line-height:1.45;color:var(--text)}