/* WIP home page only. Loaded by designtoolbox-home-v2-wip.html, after home-page.css. */

/* Inter to read, Space Grotesk for titles. Both are SIL OFL and served from here, because Google Fonts is
   unreliable from mainland China. Latin only: CJK falls through to the system stack set per language below. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.home-v2 {
    --hv2-cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC";
    --hv2-text-font: "Inter", var(--hv2-cjk), "Segoe UI", system-ui, sans-serif;
    --hv2-title-font: "Space Grotesk", "Inter", var(--hv2-cjk), "Segoe UI", system-ui, sans-serif;
    --hv2-title-track: -.02em;
    --hv2-title-lead: 1.08;
    --hv2-ink: #111827;
    --hv2-muted: #6b7280;
    --hv2-line: #e5e7eb;
    --hv2-blue: #2664ff;
    --hv2-card-w: clamp(320px, 30vw, 520px);
    --hv2-gap: 18px;
    --hv2-section-gap: 72px;
    /* The widest the page runs: only 80 px past the real home's 1680. Below about 1900 px the 92% column governs. */
    --hv2-page: 1760px;
}
/* Chinese and Japanese have no capitals to pack tight: they keep their own spacing and a taller line. */
.home-v2:lang(zh-TW) { --hv2-cjk: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC"; }
.home-v2:lang(ja) { --hv2-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP"; }
.home-v2:lang(zh),
.home-v2:lang(ja) { --hv2-title-track: 0; --hv2-title-lead: 1.26; }

/* On a phone the case row runs to the edges of the window; nothing else on the page should scroll sideways. */
.home-v2 main { overflow-x: clip; }
/* home-page.css lays white dots behind the page, out of sight on white and glaring on anything darker. */
.home-v2::after { display: none; }

/* Everything reads in Inter. Form controls and the shared header and footer set their own font, so they are named;
   the header's language rules reach every element inside it, which takes this much specificity to answer. */
.home-v2,
.home-v2 button,
.home-v2 input,
.home-v2 textarea,
.home-v2 select,
.home-v2 .mobile-nav-item,
.home-v2 .tools-brand-footer,
html body.home-v2 .header,
html body.home-v2 .header * { font-family: var(--hv2-text-font); }

/* Titles are one voice: Space Grotesk, capitals, packed tight. The headline leads and each section sits a clear step below. */
.home-v2 .title-section h1,
.home-v2 .quick-access-title-main,
.home-v2 .category-tabs-title,
.home-v2 .home-sf-title,
.home-v2 .hv2-apps-title,
.home-v2 .hv2-app-title,
.home-v2 .hv2-explore-title,
.home-v2 .stat-value,
.home-v2 .hv2-case-caption strong,
.home-v2 .tools-brand-footer h4,
.home-v2 .tools-brand-footer .dt-footer-logo {
    font-family: var(--hv2-title-font);
    font-weight: 700;
    letter-spacing: var(--hv2-title-track);
    text-transform: uppercase;
}
.home-v2 .title-section h1 {
    display: block;
    margin: 0 0 16px;
    font-size: clamp(30px, 3.5vw, 52px);
    line-height: var(--hv2-title-lead);
    text-wrap: balance;
}
.home-v2 .title-section .hero-title-blue { font-weight: inherit; line-height: inherit; vertical-align: baseline; }
.home-v2 .hero-subtitle { font-weight: 400; letter-spacing: -.01em; }
.home-v2 .quick-access-title-main,
.home-v2 .category-tabs-title,
.home-v2 .home-sf-title,
.home-v2 .hv2-apps-title {
    font-size: clamp(24px, 2.3vw, 34px);
    line-height: var(--hv2-title-lead);
    text-wrap: balance;
}
.home-v2 .hv2-explore-title {
    font-size: clamp(26px, 2.7vw, 38px);
    line-height: var(--hv2-title-lead);
}
.home-v2 .quick-tag { font-size: 13.5px; font-weight: 500; }
.home-v2 .stat-label { font-size: 13px; letter-spacing: 0; }

/* Header, every section and the footer widen together so they keep one pair of edges. */
.home-v2 .quick-access-section,
.home-v2 .category-tabs-section,
.home-v2 .tools-grid,
.home-v2 .home-sf-section,
.home-v2 .hv2-apps { max-width: var(--hv2-page); }
html body.home-v2 .header .wrapper { max-width: var(--hv2-page); }
/* Logo to the first tab (2026-11-03): the Home tab's own left margin (8px, 15px from 1600px) and the 5px padding
   style.css gives every `.head_rnav a` (here the Home link, which also put "Home" 5px further from its chevron than the
   other tabs from theirs) made the gap from the logo to "Home" 40px at 1440 and 55px at 1920. Now 27px and 35px. */
html body.home-v2 .header .head_left > .home.head_rnav { margin-left: 0; }
html body.home-v2 .header .head_left > .home.head_rnav .home-link { padding: 0; }
.home-v2 .tools-brand-footer .dt-footer-v0-container,
.home-v2 .tools-brand-footer .dt-footer-bottom { max-width: calc(var(--hv2-page) - 4rem); }
.home-v2 .hv2-tools-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid #d0d5dd;
    color: #111827;
    background: transparent;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}
.home-v2 .hv2-tools-all svg { width: 16px; height: 16px; flex: none; }
.home-v2 .hv2-tools-all:hover { background: #f3f4f6; }
.home-v2 .hv2-tools-all:focus-visible { outline: 2px solid var(--hv2-blue); outline-offset: 3px; }
body.dark-mode.home-v2 .hv2-tools-all { border-color: rgba(255,255,255,.16); color: var(--wb-text); }
body.dark-mode.home-v2 .hv2-tools-all:hover { background: var(--wb-hover); }

/* One gap between sections. */
.home-v2 .hv2-cases { margin-top: var(--hv2-section-gap); margin-bottom: 0; }
.home-v2 .category-tabs-section { margin-top: var(--hv2-section-gap); }
/* The figures sit on the page itself, not on a band of their own. */
.home-v2 .stats-section { padding-top: 0; padding-bottom: 0; background: transparent; }

#upload-zone .input-toolbar { border-top: none; }
#designPrompt {
    display: block;
    resize: none;
    line-height: 1.5;
    font-family: inherit;
    padding: 0.25rem 0;
    overflow-y: auto;
}
#upload-zone.is-sending { opacity: .72; pointer-events: none; }
.hv2-agent-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px 0 9px;
    border-radius: 999px;
    background: #eff4ff;
    color: #0a46eb;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.hv2-agent-badge svg { width: 15px; height: 15px; }
.hv2-formats { font-size: 12px; color: #9ca3af; }

/* Section headings: the site's own title with a quiet line beneath it. */
.hv2-heading { display: block; }
.hv2-subtitle { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--hv2-muted); }

/* home-page.css sets display on these cards by id, hover included. */
#tools-grid a.card[hidden],
#tools-grid a.card[hidden]:hover { display: none; }

/* Real cases */
.hv2-cases .quick-access-header { margin-bottom: 20px; }
.hv2-rail-wrap { position: relative; }
/* The row shares its edges with the tool cards below. It rests on whole cards and moves one card at a
   time, so nothing is left cut in half at its sides and it needs no fade or mask there. */
.hv2-rail { overflow: hidden; margin: -10px 0; padding: 10px 0; touch-action: pan-y; }
@supports (width: 1cqw) {
    .hv2-rail {
        --hv2-card-w: calc((100cqw - 2 * var(--hv2-gap)) / 3);
        container-type: inline-size;
    }
    @media (max-width: 1100px) {
        .hv2-rail { --hv2-card-w: calc((100cqw - var(--hv2-gap)) / 2); }
    }
    @media (max-width: 768px) {
        .hv2-rail { --hv2-card-w: min(calc(100cqw - 24px), 420px); }
    }
}
.hv2-track {
    display: flex;
    width: max-content;
    transform: translateX(-50%);
    transition: transform .8s cubic-bezier(.45, 0, .2, 1);
    will-change: transform;
}
.hv2-set { display: flex; gap: var(--hv2-gap); padding-right: var(--hv2-gap); }

.hv2-case {
    position: relative;
    display: block;
    flex: 0 0 var(--hv2-card-w);
    width: var(--hv2-card-w);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    background: #15181f;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 8px 24px rgba(17, 24, 39, .08);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease;
    isolation: isolate;
}
.hv2-case:hover,
.hv2-case:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(17, 24, 39, .08), 0 18px 38px rgba(17, 24, 39, .18);
    color: #fff;
}
.hv2-case:focus-visible { outline: 2px solid var(--hv2-blue); outline-offset: 2px; }
.hv2-case-media { position: absolute; inset: 0; }
.hv2-case-media > .hv2-still,
.hv2-case-media > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.hv2-case::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52%;
    z-index: 1;
    background: linear-gradient(to top, rgba(6, 8, 12, .88), rgba(6, 8, 12, .6) 42%, rgba(6, 8, 12, .18) 76%, rgba(6, 8, 12, 0));
    pointer-events: none;
}
/* The SketchUp clip's front view is pale: a shorter shade keeps the ground floor readable. */
.hv2-case[href*="sketchup"]::after { height: 38%; }

.hv2-case-input {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 76px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
/* The Rhino clip's tower and its lettering stand in the top right corner. */
.hv2-case[href*="rhino"] .hv2-case-input { right: auto; left: 14px; }
.hv2-case-input img { display: block; width: 100%; height: 58px; object-fit: cover; }
.hv2-case-input em {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(10, 12, 16, .66);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px;
}
.hv2-case-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 15px;
    z-index: 2;
    display: block;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.hv2-case-caption strong {
    display: block;
    font-size: 17px;
    line-height: 1.3;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .36);
}
.hv2-case-caption span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .84);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
/* Pictures on a pale ground take dark words and no shade. */
.hv2-case--light { background: #f7f7f8; color: #111827; }
.hv2-case--light:hover,
.hv2-case--light:focus-visible { color: #111827; }
.hv2-case--light::after {
    height: 38%;
    background: linear-gradient(to top, rgba(255, 255, 255, .97), rgba(255, 255, 255, .88) 52%, rgba(255, 255, 255, 0));
}
.hv2-case--light .hv2-case-caption strong { color: #111827; text-shadow: none; }
.hv2-case--light .hv2-case-caption span { color: #4b5563; text-shadow: none; }
.hv2-case--light .hv2-case-go { background: #111827; color: #fff; }
.hv2-case-go {
    position: absolute;
    left: 18px;
    bottom: 15px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .22s ease, transform .28s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
}
.hv2-case-go svg { width: 14px; height: 14px; }
.hv2-case:hover .hv2-case-caption,
.hv2-case:focus-visible .hv2-case-caption { transform: translateY(-40px); }
.hv2-case:hover .hv2-case-go,
.hv2-case:focus-visible .hv2-case-go { opacity: 1; transform: translateY(0); }

.hv2-rail-nav {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    color: #374151;
    box-shadow: 0 2px 12px rgba(17, 24, 39, .16);
    cursor: pointer;
    transition: transform .18s ease, color .18s ease;
}
.hv2-rail-nav:hover { color: var(--hv2-blue); transform: scale(1.06); }
.hv2-rail-nav--prev { left: -16px; }
.hv2-rail-nav--next { right: -16px; }

/* Workflow cards are links now. */
#tools-grid a.card,
#tools-grid a.card:hover { display: block; color: inherit; text-decoration: none; }

/* The cases lead; tools are a quieter index below them, four columns at most. */
.home-v2 #tools-grid a.card { aspect-ratio: auto; }
.home-v2 #tools-grid .card-content { min-height: 0; padding: .25rem .875rem .875rem; }
.home-v2 #tools-grid .card-title { margin-bottom: 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.home-v2 #tools-grid .card-description { font-size: 14px; line-height: 1.43; color: #6b7280; }

/* Partner names: the row fades by a mask, so it never shows a band of another colour. */
.home-v2 .company-marquee {
    margin-top: 2.5rem;
    padding: 1.5rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.home-v2 .company-marquee::before,
.home-v2 .company-marquee::after { display: none; }

/* Apps */
.hv2-apps {
    box-sizing: border-box;
    width: 92%;
    margin: 0 auto;
    padding: 72px 32px 24px;
}
.hv2-apps-heading { margin-bottom: 26px; text-align: left; }
.hv2-apps-title { margin: 0; color: var(--hv2-ink); }
.hv2-app {
    --hv2-app-text: #111827;
    --hv2-app-soft: #4b5563;
    --hv2-app-line: rgba(17, 24, 39, .1);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
    margin-bottom: 22px;
    padding: clamp(24px, 3.4vw, 48px);
    border-radius: 26px;
    color: var(--hv2-app-text);
}
/* All three apps share the pale blue ground in the light theme (the user's choice: first SketchUp, then Rhino). */
.hv2-app--windows,
.hv2-app--sketchup,
.hv2-app--rhino { background: linear-gradient(135deg, #eaf1ff 0%, #f3f6fc 62%, #eef2f9 100%); }
.hv2-app:nth-of-type(even) .hv2-app-copy { order: 2; }
.hv2-app:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hv2-app-name {
    display: inline-block;
    font-family: var(--hv2-title-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--hv2-blue);
}
.hv2-app-title {
    margin: 8px 0 0;
    font-size: clamp(26px, 2.5vw, 36px);
    line-height: var(--hv2-title-lead);
    text-wrap: balance;
    color: var(--hv2-app-text);
}
.hv2-app-lead {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--hv2-app-soft);
}
/* A plain list on hairlines. Every row shows its line all the time and the one in play only changes colour and
   carries the progress, so nothing in the block moves when a clip ends and the next row comes up. */
.hv2-app-list { margin: 22px 0 0; box-shadow: inset 0 1px 0 var(--hv2-app-line); }
.hv2-app-item {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 11px 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--hv2-app-line);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hv2-app-item:focus-visible { outline: 2px solid var(--hv2-blue); outline-offset: -2px; }
/* One weight for every row: a bolder active title is wider and its letters shift when the row changes. */
.hv2-app-item strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--hv2-app-soft);
    transition: color .18s ease;
}
.hv2-app-item span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.43;
    color: var(--hv2-app-soft);
    opacity: .6;
    transition: opacity .24s ease;
}
.hv2-app-item:hover strong,
.hv2-app-item.is-active strong { color: var(--hv2-app-text); }
.hv2-app-item:hover span { opacity: .8; }
.hv2-app-item.is-active span { opacity: 1; }
.hv2-app-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--hv2-blue);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
}
.hv2-app-item.is-active .hv2-app-progress { opacity: 1; }
.hv2-app-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.hv2-app-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--hv2-blue);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    transition: background .18s ease;
}
.hv2-app-cta:hover { background: #0a46eb; color: #fff; }
.hv2-app-cta svg { width: 15px; height: 15px; transition: transform .2s ease; }
.hv2-app-cta:hover svg { transform: translateX(2px); }
.hv2-app-meta { font-size: 13px; line-height: 1.4; color: var(--hv2-app-soft); }

.hv2-app-stage {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 16px;
    background: #0e1116;
    box-shadow: 0 2px 6px rgba(17, 24, 39, .1), 0 22px 50px rgba(17, 24, 39, .2);
}
.hv2-app--windows .hv2-app-stage { aspect-ratio: 984 / 726; }
.hv2-app--sketchup .hv2-app-stage { aspect-ratio: 16 / 9; }
.hv2-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .5s ease;
}
.hv2-slide.is-active { opacity: 1; }
.hv2-slide video,
.hv2-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv2-slide > video { position: absolute; inset: 0; }
.hv2-case-media > video,
.hv2-slide > video { opacity: 0; transition: opacity .45s ease; }
.hv2-case-media.is-live > video,
.hv2-slide.is-live > video { opacity: 1; }

/* Explore: every tool as a small chip under one heading, in place of the old closing banner (the user's pick, after
   Higgsfield's "Explore more AI features"). Each opens its tool in the Workbench, or its app's page. */
.hv2-explore {
    box-sizing: border-box;
    width: 92%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 84px 0 96px;
    text-align: center;
}
.hv2-explore-title { margin: 0 0 30px; color: var(--hv2-ink); text-wrap: balance; }
.hv2-explore-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hv2-explore-list a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 13px;
    border-radius: 8px;
    background: #f1f3f6;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.hv2-explore-list a:hover { background: #e5e8ee; color: #111827; }
.hv2-explore-list a:focus-visible { outline: 2px solid var(--hv2-blue); outline-offset: 2px; }
@media (max-width: 640px) {
    .hv2-explore { padding: 56px 0 64px; }
    .hv2-explore-list { gap: 6px; }
    .hv2-explore-list a { height: 32px; padding: 0 11px; font-size: 13px; }
}

/* Dark theme: the Workbench palette (workbench-app/src/styles/tokens.css), on this page alone.
   Shell is the page, surface the cards, soft the fields. dark-theme.css stays as it is for every other
   page, so each rule here names .home-v2 to outrank it, and takes !important where that file does. */
body.dark-mode.home-v2 {
    --wb-shell: #111316;
    --wb-panel: #16181c;
    --wb-surface: #1d2025;
    --wb-soft: #22262c;
    --wb-line: #2b3038;
    --wb-border: #343a44;
    --wb-hover: #2a2f37;
    --wb-text: #e7e9ed;
    --wb-muted: #a0a7b2;
    --wb-faint: #7b8390;
    --wb-primary: #2664ff;
    --wb-primary-hover: #477bff;
    --wb-accent: #99b6ff;
    --wb-divider: rgba(255, 255, 255, .07);
    color: var(--wb-text);
}
html.dark-mode:has(> body.home-v2),
body.dark-mode.home-v2.min-h-screen.bg-white { background-color: #111316 !important; }

/* Header */
body.dark-mode.home-v2 .header { background-color: var(--wb-shell); border-bottom-color: var(--wb-divider); }
body.dark-mode.home-v2 .header-text-title { color: var(--wb-text); }
body.dark-mode.home-v2 .head_left :is(.plugins, .tools, .pricing, .tutorial, .canvas).head_rnav .hr-text,
body.dark-mode.home-v2 .head_left .canvas.head_rnav [data-i18n="canvas"],
body.dark-mode.home-v2 .head_left [data-i18n="navSketchup"],
body.dark-mode.home-v2 .head_left [data-i18n="navRhino"],
body.dark-mode.home-v2 .head_left [data-i18n="sidebarHome"] { color: var(--wb-text) !important; }
body.dark-mode.home-v2 .nav-dropdown-menu,
body.dark-mode.home-v2 .lang-dropdown {
    background-color: var(--wb-surface);
    border-color: var(--wb-line);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
body.dark-mode.home-v2 .nav-dropdown-item,
body.dark-mode.home-v2 .nav-dropdown-item a,
body.dark-mode.home-v2 .lang-option,
body.dark-mode.home-v2 .globe-icon,
body.dark-mode.home-v2 .dropdown-arrow { color: var(--wb-text); }
body.dark-mode.home-v2 .lang-switch-container .hr-text,
body.dark-mode.home-v2 .lang-current-text { color: var(--wb-text) !important; }
body.dark-mode.home-v2 .nav-dropdown-item:hover,
body.dark-mode.home-v2 .lang-option:hover,
body.dark-mode.home-v2 .lang-option.active { background-color: var(--wb-hover); }
body.dark-mode.home-v2 .login-register-btn { background-color: var(--wb-primary) !important; }
body.dark-mode.home-v2 .login-register-btn:hover { background-color: var(--wb-primary-hover) !important; }
body.dark-mode.home-v2 .try-tools-btn { background-color: var(--wb-primary) !important; border-color: var(--wb-primary); }
body.dark-mode.home-v2 .try-tools-btn:hover { background-color: var(--wb-primary-hover) !important; }
body.dark-mode.home-v2 .mobile-nav-menu,
body.dark-mode.home-v2 #mobileMenu,
body.dark-mode.home-v2 .mobile-nav-panel { background-color: var(--wb-shell); border-color: var(--wb-line); color: var(--wb-text); }
body.dark-mode.home-v2 .mobile-nav-item { color: var(--wb-text); border-bottom-color: var(--wb-line); }

/* Credits, avatar, account menu, Plugins & Apps and Start Free: since 2026-11-03 every page has the look this page
   had, from header-2.css (with the Inter face), so nothing for them is left here. */

/* Words */
body.dark-mode.home-v2 .title-section h1,
body.dark-mode.home-v2 .quick-access-title-main,
body.dark-mode.home-v2 .category-tabs-title,
body.dark-mode.home-v2 .home-sf-title,
body.dark-mode.home-v2 .home-sf-card-title,
body.dark-mode.home-v2 .hv2-apps-title,
body.dark-mode.home-v2 .hv2-explore-title,
body.dark-mode.home-v2 .card-title { color: var(--wb-text); }
body.dark-mode.home-v2 .hero-subtitle,
body.dark-mode.home-v2 .hv2-subtitle,
body.dark-mode.home-v2 .home-sf-subtitle,
body.dark-mode.home-v2 .home-sf-prompt,
body.dark-mode.home-v2 #tools-grid .card-description { color: var(--wb-muted); }
body.dark-mode.home-v2 .hero-title-blue,
body.dark-mode.home-v2 .home-section-title-accent,
body.dark-mode.home-v2 .home-sf-title-accent,
body.dark-mode.home-v2 .hv2-app-name { color: var(--wb-accent); }

/* Hero */
body.dark-mode.home-v2 .home-whatsnew { background: var(--wb-surface); border-color: var(--wb-line); color: var(--wb-muted); }
body.dark-mode.home-v2 .home-whatsnew:hover { background: var(--wb-hover); border-color: var(--wb-border); }
body.dark-mode.home-v2 .home-whatsnew-tag { border-color: var(--wb-border); color: var(--wb-text); }
body.dark-mode.home-v2 .home-whatsnew:hover .home-whatsnew-arrow { color: var(--wb-accent); }
body.dark-mode.home-v2 .upload-zone {
    background-color: transparent !important;
    background-image: linear-gradient(var(--gradient-angle, 135deg), var(--wb-border), var(--wb-accent), var(--wb-border));
}
body.dark-mode.home-v2 .upload-zone-inner,
body.dark-mode.home-v2 .input-toolbar { background-color: var(--wb-surface) !important; border-color: transparent !important; }
body.dark-mode.home-v2 .upload-zone-inner textarea { color: var(--wb-text) !important; }
body.dark-mode.home-v2 .upload-zone-inner textarea::placeholder { color: var(--wb-faint) !important; }
body.dark-mode.home-v2 #addImageBtn { background-color: var(--wb-soft) !important; border-color: var(--wb-border) !important; color: var(--wb-muted) !important; }
body.dark-mode.home-v2 #addImageBtn:hover { background-color: var(--wb-hover) !important; border-color: var(--wb-accent) !important; color: var(--wb-text) !important; }
body.dark-mode.home-v2 #addImageBtn svg { color: inherit; }
body.dark-mode.home-v2 .input-thumbnail { background-color: var(--wb-soft); border-color: var(--wb-border); }
body.dark-mode.home-v2 .toolbar-divider { background-color: var(--wb-border); }
body.dark-mode.home-v2 .hv2-formats { color: var(--wb-faint); }
body.dark-mode.home-v2 .hv2-agent-badge { background: rgba(153, 182, 255, .12); color: var(--wb-accent); }
body.dark-mode.home-v2 .submit-btn { background-color: var(--wb-hover) !important; color: var(--wb-muted) !important; }
body.dark-mode.home-v2 .submit-btn.active { background-color: var(--wb-primary) !important; color: #fff !important; }
body.dark-mode.home-v2 .submit-btn.active:hover { background-color: var(--wb-primary-hover) !important; }
body.dark-mode.home-v2 .quick-tag {
    background-color: var(--wb-surface) !important;
    border-color: var(--wb-line) !important;
    color: var(--wb-muted) !important;
}
body.dark-mode.home-v2 .quick-tag:hover {
    background-color: var(--wb-hover) !important;
    border-color: var(--wb-border) !important;
    color: var(--wb-text) !important;
}
body.dark-mode.home-v2 .quick-tag.active {
    background-color: var(--wb-primary) !important;
    border-color: var(--wb-primary) !important;
    color: #fff !important;
}

/* Cases */
body.dark-mode.home-v2 .hv2-case {
    background: var(--wb-surface);
    box-shadow: 0 0 0 1px var(--wb-divider), 0 12px 30px rgba(0, 0, 0, .3);
}
body.dark-mode.home-v2 .hv2-case:hover,
body.dark-mode.home-v2 .hv2-case:focus-visible { box-shadow: 0 0 0 1px var(--wb-border), 0 20px 44px rgba(0, 0, 0, .45); }
/* Pale pictures were the brightest thing on the page: held down, they stop pulling the eye from the headline. */
body.dark-mode.home-v2 .hv2-case--light { filter: brightness(.92); }
body.dark-mode.home-v2 .hv2-rail-nav {
    background: rgba(29, 32, 37, .86);
    border-color: var(--wb-border);
    color: var(--wb-text);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
body.dark-mode.home-v2 .hv2-rail-nav:hover { background: var(--wb-hover); color: var(--wb-accent); }

/* Tools and prompts */
body.dark-mode.home-v2 #tools-grid a.card {
    background-color: var(--wb-surface) !important;
    background-image: none !important;
    border: 1px solid var(--wb-line) !important;
    box-shadow: none !important;
    color: var(--wb-text) !important;
}
body.dark-mode.home-v2 #tools-grid a.card:hover {
    background-color: var(--wb-soft) !important;
    border-color: var(--wb-border) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .34) !important;
}
body.dark-mode.home-v2 .card-image-container { background-color: transparent; }
body.dark-mode.home-v2 .card-image { background-color: var(--wb-soft) !important; }
body.dark-mode.home-v2 .badge-blue { background-color: var(--wb-primary); }
body.dark-mode.home-v2 .category-tabs-section { background-color: transparent; }
body.dark-mode.home-v2 .home-sf-card,
body.dark-mode.home-v2 .home-sf-view-all,
body.dark-mode.home-v2 .home-sf-load-more,
body.dark-mode.home-v2 .home-sf-model,
body.dark-mode.home-v2 .home-sf-use { background: var(--wb-surface); border-color: var(--wb-line); color: var(--wb-text); }
body.dark-mode.home-v2 .home-sf-view-all:hover,
body.dark-mode.home-v2 .home-sf-load-more:hover { background: var(--wb-hover); border-color: var(--wb-border); }
body.dark-mode.home-v2 .home-sf-card-body { background: var(--wb-surface); border-color: var(--wb-line); }
body.dark-mode.home-v2 .home-sf-media { background: var(--wb-soft); }
body.dark-mode.home-v2 .home-sf-use:hover { background: var(--wb-primary); border-color: var(--wb-primary); color: #fff; }
body.dark-mode.home-v2 .home-sf-tag { background: rgba(17, 19, 22, .55); }

/* Stats, partners and the closing call */
body.dark-mode.home-v2 .stats-section { background-color: transparent !important; color: var(--wb-muted) !important; }
body.dark-mode.home-v2 .stats-section .stat-item > .stat-value { color: var(--wb-text) !important; }
body.dark-mode.home-v2 .stats-section .stat-label { color: var(--wb-muted); }
body.dark-mode.home-v2 .stat-item:not(:last-child)::after { background: var(--wb-border); }
body.dark-mode.home-v2 .company-marquee { background-color: transparent; border-top-color: var(--wb-border); }
body.dark-mode.home-v2 .marquee-item { color: var(--wb-faint); }
body.dark-mode.home-v2 .hv2-explore-list a { background: var(--wb-soft); color: var(--wb-muted); }
body.dark-mode.home-v2 .hv2-explore-list a:hover { background: var(--wb-hover); color: var(--wb-text); }

/* Apps */
body.dark-mode.home-v2 .hv2-app {
    --hv2-app-text: var(--wb-text);
    --hv2-app-soft: var(--wb-muted);
    --hv2-app-line: var(--wb-divider);
    background: var(--wb-surface);
    box-shadow: inset 0 0 0 1px var(--wb-line);
}
body.dark-mode.home-v2 .hv2-app-title { color: var(--wb-text) !important; }
body.dark-mode.home-v2 .hv2-app-lead { color: var(--wb-muted) !important; }
body.dark-mode.home-v2 .hv2-app-progress { background: var(--wb-accent); }
body.dark-mode.home-v2 .hv2-app-cta { background: var(--wb-primary); }
body.dark-mode.home-v2 .hv2-app-cta:hover { background: var(--wb-primary-hover); }
body.dark-mode.home-v2 .hv2-app-stage { background: var(--wb-shell); box-shadow: 0 0 0 1px var(--wb-divider), 0 18px 40px rgba(0, 0, 0, .4); }

/* Footer and overlays */
body.dark-mode.home-v2 .tools-brand-footer .dt-footer-bottom { border-top-color: #ffffff40 !important; }
/* home-page.css paints the arrow #374151 in every theme, which all but vanished on the dark button. */
body.dark-mode.home-v2 .back-to-top { background-color: var(--wb-soft); border-color: rgba(255, 255, 255, .14); color: var(--wb-text); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
body.dark-mode.home-v2 .back-to-top svg { color: inherit; }
body.dark-mode.home-v2 .back-to-top:hover { background-color: #2d323b; border-color: rgba(255, 255, 255, .24); color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08); }
body.dark-mode.home-v2 .back-to-top:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 3px; }
/* The shared logout dialog stays white and leaves Cancel's colour unset, so on dark it took the page's light text. */
body.dark-mode.home-v2 .logout-cfm { background: var(--wb-surface); color: var(--wb-text); box-shadow: 0 0 0 1px var(--wb-border), 0 24px 60px rgba(0, 0, 0, .55); }
body.dark-mode.home-v2 .logout-cfm .lc-title { color: var(--wb-text); }
body.dark-mode.home-v2 .logout-cfm .lc-btn-cancel { background: var(--wb-soft); color: var(--wb-text); box-shadow: inset 0 0 0 1px var(--wb-border); }
body.dark-mode.home-v2 .logout-cfm .lc-btn-cancel:hover { background: var(--wb-hover); }
body.dark-mode.home-v2 .logout-cfm .lc-btn-ok { background-color: var(--wb-primary); color: #fff; }
body.dark-mode.home-v2 .logout-cfm .lc-btn-ok:hover { background-color: var(--wb-primary-hover); }
body.dark-mode.home-v2 .mobile-block-modal-card { background-color: var(--wb-surface); color: var(--wb-text); }
body.dark-mode.home-v2 .mobile-desktop-cta-btn { background-color: var(--wb-primary); }
body.dark-mode.home-v2 .login-panel,
body.dark-mode.home-v2 .lp-right { background-color: var(--wb-surface); }
body.dark-mode.home-v2 .lprfi-border { background-color: var(--wb-shell); border-color: var(--wb-border); }
body.dark-mode.home-v2 .lp-subtabs { background-color: var(--wb-shell); }
body.dark-mode.home-v2 .lp-subtab.active { background-color: var(--wb-hover); }

@media (prefers-reduced-motion: reduce) {
    .hv2-track { transform: none; transition: none; }
    .hv2-rail { overflow-x: auto; scrollbar-width: none; touch-action: auto; }
    .hv2-rail::-webkit-scrollbar { display: none; }
    .hv2-set[aria-hidden="true"] { display: none; }
}

/* On a narrow card the words wrap and stand taller, so their shade rises with them. */
@media (max-width: 1100px) {
    .hv2-case::after,
    .hv2-case[href*="sketchup"]::after { height: 62%; }
    .hv2-case--light::after { height: 60%; }
}

@media (max-width: 960px) {
    .hv2-app,
    .hv2-app:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
    .hv2-app:nth-of-type(even) .hv2-app-copy,
    .hv2-app-copy { order: 2; }
    .hv2-app-stage { order: 1; }
    .hv2-apps { padding-top: 48px; }
}

@media (max-width: 768px) {
    .home-v2 { --hv2-card-w: min(84vw, 340px); --hv2-gap: 12px; }
    .hv2-rail-nav { display: none; }
    /* A phone has no room for margins beside the row: the neighbouring cards show there instead. */
    .hv2-rail { margin: -10px calc(50% - 50vw); padding: 10px 20px; }
    .home-v2 { --hv2-section-gap: 48px; }
    .hv2-case-caption strong { font-size: 15.5px; }
    .hv2-case-caption span { font-size: 13px; }
    .hv2-case-input { width: 62px; }
    .hv2-case-input img { height: 47px; }
    .hv2-app { border-radius: 20px; }
}

/* A phone's composer has room for the badge and the button, not the format note. */
@media (max-width: 520px) {
    .home-v2 .input-toolbar .toolbar-divider,
    .home-v2 .input-toolbar .hv2-formats { display: none; }
}


/* Agent storyboards are complete before enhancement, including without JavaScript. */
.hv2-agent { --flow-text: #111827; --flow-muted: #6b7280; --flow-line: #dbe3f0; --flow-card: #fff; --flow-blue: var(--hv2-blue); box-sizing: border-box; width: 92%; max-width: var(--hv2-page); margin: 72px auto; padding: 0 32px; color: var(--flow-text); }
.hv2-agent * { box-sizing: border-box; }
.hv2-agent .hv2-agent-heading { margin-bottom: 28px; }
.hv2-agent .hv2-agent-kicker { margin: 0 0 10px; color: var(--flow-blue); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.hv2-agent h2 { margin: 0; font-family: var(--hv2-title-font); font-size: clamp(24px, 2.3vw, 34px); font-weight: 700; letter-spacing: var(--hv2-title-track); line-height: var(--hv2-title-lead); text-transform: uppercase; text-wrap: balance; color: var(--flow-text); }
.hv2-agent h2 span { color: var(--flow-blue); }
.hv2-agent .hv2-agent-subtitle { max-width: 680px; margin: 1rem 0 0; color: var(--flow-muted); font-size: 1rem; line-height: 1.7; }
.hv2-agent .hv2-agent-ground { padding: 24px; border-radius: 26px; background: linear-gradient(135deg, #eaf1ff 0%, #f3f6fc 62%, #eef2f9 100%); }
.hv2-agent .hv2-flow { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 4fr); gap: 20px; padding: 16px; border: 1px solid var(--flow-line); border-radius: 18px; background: var(--flow-card); }
.hv2-agent .hv2-flow + .hv2-flow { margin-top: 18px; }
.hv2-agent .hv2-flow-copy { min-width: 0; align-self: center; padding: 8px 4px; }
.hv2-agent h3 { margin: 0 0 22px; font-size: clamp(22px, 2vw, 30px); font-weight: 700; line-height: 1.16; letter-spacing: -.03em; color: var(--flow-text); }
.hv2-agent .hv2-flow-request { color: var(--flow-muted); font-size: 15px; line-height: 1.5; }
.hv2-agent .hv2-flow-ran { margin: 24px 0 20px; padding-top: 14px; border-top: 1px solid var(--flow-line); color: var(--flow-muted); font-size: 15px; }
.hv2-agent .hv2-flow-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 16px; max-width: 100%; border-radius: 8px; background: var(--flow-blue); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-align: center; text-decoration: none; transition: background .18s ease; }
.hv2-agent .hv2-flow-go:hover { background: #0a46eb; color: #fff; }
.hv2-agent .hv2-flow-go svg { flex: none; width: 15px; height: 15px; transition: transform .2s ease; }
.hv2-agent .hv2-flow-go:hover svg { transform: translateX(2px); }
.hv2-agent .hv2-flow-go:focus-visible { outline: 3px solid var(--flow-blue); outline-offset: 4px; }
.hv2-agent .hv2-flow-go[aria-busy="true"] { opacity: .65; }
.hv2-agent .hv2-flow-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; align-items: stretch; }
.hv2-agent .hv2-flow--room .hv2-flow-frames { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.08fr); }
.hv2-agent .hv2-flow-step { position: relative; min-width: 0; padding: 3px; border: 1px solid var(--flow-line); border-radius: 13px; display: flex; flex-direction: column; opacity: 1; }
.hv2-agent h4 { display: flex; align-items: center; gap: 8px; height: 60px; flex: 0 0 60px; margin: 0; padding: 5px 8px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--flow-text); }
.hv2-agent .hv2-flow-number { position: relative; display: grid; place-items: center; flex: 0 0 22px; height: 22px; border: 1px solid var(--flow-line); border-radius: 50%; color: var(--flow-muted); font-size: 12px; font-weight: 600; }
.hv2-agent .hv2-flow-number svg { position: absolute; width: 12px; height: 12px; opacity: 0; }
.hv2-agent .hv2-flow-picture { position: relative; flex: 1; min-height: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 9px; background: #fff; }
.hv2-agent .hv2-flow-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hv2-agent .hv2-flow-picture--cover img { object-fit: cover; }
.hv2-agent .hv2-flow--room .hv2-flow-picture { aspect-ratio: 1 / 1; }
.hv2-agent .hv2-flow-wipe { clip-path: inset(0); }
.hv2-agent .hv2-flow-inventory { flex: 1; min-height: 0; padding: 2px 6px 6px; display: flex; flex-direction: column; }
.hv2-agent .hv2-flow-inventory ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px 8px; flex: 1; margin: 0; padding: 0; list-style: none; }
.hv2-agent .hv2-flow-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; font-size: 12px; line-height: 1.3; }
.hv2-agent .hv2-flow-thumb { position: relative; display: block; flex: 1; min-height: 64px; border: 1px solid var(--flow-line); border-radius: 8px; background: #fff; overflow: hidden; }
.hv2-agent .hv2-flow-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hv2-agent .hv2-flow-thumb b { position: absolute; left: 5px; top: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #111827; box-shadow: 0 1px 4px #0003; font-size: 11px; font-weight: 700; }
.hv2-agent .hv2-flow-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; color: var(--flow-text); }
.hv2-agent .hv2-flow-found { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #eef3ff; color: var(--flow-blue); font-size: 12px; font-weight: 600; white-space: nowrap; }
.hv2-agent .hv2-flow-dot { position: absolute; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #fff; color: #111827; box-shadow: 0 1px 6px #0004; font-size: 12px; font-weight: 700; transform: translate(-50%, -50%); }
.hv2-agent .is-waiting .hv2-flow-step { transition: opacity 300ms ease; }
.hv2-agent .is-waiting .hv2-flow-step:not(.is-done):not(.is-revealing) { opacity: .35; }
.hv2-agent .is-waiting .hv2-flow-number,
.hv2-agent .is-waiting .hv2-flow-number > span,
.hv2-agent .is-waiting .hv2-flow-number svg { transition: opacity 300ms ease, color 300ms ease; }
.hv2-agent .is-waiting .hv2-flow-step.is-done .hv2-flow-number { color: var(--flow-blue); }
.hv2-agent .is-waiting .hv2-flow-step.is-done .hv2-flow-number > span { opacity: 0; }
.hv2-agent .is-waiting .hv2-flow-step.is-done .hv2-flow-number svg { opacity: 1; }
.hv2-agent .is-waiting .hv2-flow-wipe { transition: clip-path 900ms ease; }
.hv2-agent .is-waiting .hv2-flow-step:not(.is-revealing):not(.is-done) .hv2-flow-wipe { clip-path: inset(0 100% 0 0); }
.hv2-agent .is-waiting .hv2-flow-dot { transition: opacity 250ms ease, transform 250ms ease; }
.hv2-agent .is-waiting .hv2-flow-dot:not(.is-found) { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
.hv2-agent .is-waiting .hv2-flow-item,
.hv2-agent .is-waiting .hv2-flow-found { transition: opacity 250ms ease, transform 250ms ease; }
.hv2-agent .is-waiting .hv2-flow-item:not(.is-found),
.hv2-agent .is-waiting .hv2-flow-found:not(.is-found) { opacity: 0; transform: translateY(8px); }
body.dark-mode.home-v2 .hv2-agent { --flow-text: var(--wb-text); --flow-muted: var(--wb-muted); --flow-line: var(--wb-line); --flow-card: var(--wb-panel); --flow-blue: var(--wb-primary); }
body.dark-mode.home-v2 .hv2-agent .hv2-agent-ground { background: var(--wb-surface); }
body.dark-mode.home-v2 .hv2-agent h2 span,
body.dark-mode.home-v2 .hv2-agent .hv2-agent-kicker,
body.dark-mode.home-v2 .hv2-agent .hv2-flow-found { color: var(--wb-accent); }
body.dark-mode.home-v2 .hv2-agent .hv2-flow-number { border-color: var(--wb-border); color: var(--wb-muted); }
body.dark-mode.home-v2 .hv2-agent .hv2-flow-found { background: var(--wb-soft); }
body.dark-mode.home-v2 .hv2-agent .hv2-flow-go:hover { background: var(--wb-primary-hover); }
body.dark-mode.home-v2 .hv2-agent .is-waiting .hv2-flow-step.is-done .hv2-flow-number { color: var(--wb-accent); }
@media (max-width: 1100px) {
    .hv2-agent .hv2-flow { grid-template-columns: minmax(0, 1fr); }
    .hv2-agent .hv2-flow-copy { padding: 8px; }
}
@media (max-width: 900px) {
    .hv2-agent .hv2-flow-frames,
    .hv2-agent .hv2-flow--room .hv2-flow-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv2-agent .hv2-flow-list { grid-column: 1 / -1; }
    .hv2-agent .hv2-flow-inventory ol { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; }
    .hv2-agent .hv2-flow-thumb { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 520px) {
    .hv2-agent { padding: 0; margin-top: 48px; }
    .hv2-agent .hv2-agent-ground { padding: 12px; }
    .hv2-agent .hv2-flow { padding: 10px; }
    .hv2-agent .hv2-flow-frames,
    .hv2-agent .hv2-flow--room .hv2-flow-frames { grid-template-columns: minmax(0, 1fr); }
    .hv2-agent .hv2-flow-inventory ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}