.fern-label { margin: 0; display: grid; gap: .3rem; color: var(--phrond-text-muted); font: 600 .6875rem/1.4 var(--phrond-font-body); text-transform: uppercase; letter-spacing: .05em; }
.fern-label:has(> input[type="checkbox"]), .fern-label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
/* One UI component system for Landing and every tool. Canvas styles stay local. */
*, .fern-palette-dialog, .fern-palette-dialog * { box-sizing: border-box; }
[hidden], :where([data-fern-shell="site"]) [hidden], :where([data-fern-shell="simple"]) .studio-view.is-hidden, :where([data-fern-shell="simple"]) .border-tab-panel.is-hidden, .fern-palette-text [hidden], .fern-palette-dialog [hidden] { display: none !important; }
:root[data-fern-shell="editor"] { line-height: normal; }
html { background: var(--phrond-surface-page); color: var(--phrond-text-primary); font: 16px/1.5 var(--phrond-font-body); }
body { margin: 0; background: var(--phrond-surface-page); color: var(--phrond-text-primary); font: var(--fern-font-size)/1.4 var(--phrond-font-body); }
:where(button, input, select, textarea):not(:where([data-fern-canvas] *)) { font: var(--fern-font-size)/1.4 var(--phrond-font-body); }
.fern-page-background { position: fixed; top: 50px; left: -30px; display: block; width: 72vw; height: auto; pointer-events: none; z-index: 0; }
a { color: inherit; text-decoration: none; }
:where(h1,h2,h3):not(:where([data-fern-canvas] *)) { margin: 0 0 .75em; color: var(--fern-heading-color); font-family: var(--phrond-font-title); font-weight: 600; line-height: 1.25; }
h1:not(:where([data-fern-canvas] *)) { font-size: var(--fern-heading1-size); margin-bottom: .5rem; }
h2:not(:where([data-fern-canvas] *)) { font-size: var(--fern-heading2-size); }
h3:not(:where([data-fern-canvas] *)) { font-size: 1.125rem; }
.fern-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; fill: currentColor; vertical-align: -.125em; pointer-events: none; }

/* Buttons have two sizes, independent of the tool or placement. */
.fern-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--fern-button-height, 2.75rem); padding: var(--fern-button-padding, .6rem 1rem); border: 1px solid var(--fern-control-border); border-radius: var(--fern-button-radius); background: var(--phrond-button-bg); color: var(--phrond-button-text); text-decoration: none; white-space: nowrap; cursor: pointer; }
.fern-button-small { min-height: var(--fern-button-small-height, 2rem); padding: var(--fern-button-small-padding, .35rem .6rem); }
.fern-button:hover { background: var(--phrond-button-hover); border-color: var(--fern-accent); }
.fern-button:active, .fern-button:is(.active,.is-active,.is-selected,.is-current,[aria-pressed="true"]) { background: var(--phrond-button-active); border-color: var(--fern-accent); }
.fern-button-primary { background: var(--fern-accent-strong); border-color: var(--fern-accent); color: var(--fern-text-inverse); }
.fern-button-primary:hover { background: var(--fern-accent-deep); }
:where([data-fern-shell="site"]) [data-fern-tool-landing]:not([data-fern-tool-landing="launch"]):not([data-fern-tool-landing="publish"]):not([data-fern-tool-landing="flourish"]) a.fern-button-primary[href^="/tools/"],
:where([data-fern-shell="site"]) [data-fern-tool-landing]:not([data-fern-tool-landing="launch"]):not([data-fern-tool-landing="publish"]):not([data-fern-tool-landing="flourish"]) a.fern-button-primary[href^="/tools/"]:hover,
:where([data-fern-shell="site"]) [data-fern-tool-landing]:not([data-fern-tool-landing="launch"]):not([data-fern-tool-landing="publish"]):not([data-fern-tool-landing="flourish"]) a.fern-button-primary[href^="/tools/"]:active {
  background: var(--fern-launch-button-bg);
  border-color: var(--fern-launch-button-border);
  color: var(--fern-text-inverse);
}
:where([data-fern-shell="site"]) [data-fern-tool-landing]:not([data-fern-tool-landing="launch"]):not([data-fern-tool-landing="publish"]):not([data-fern-tool-landing="flourish"]) a.fern-button-primary[href^="/tools/"]:focus-visible { outline-color: var(--fern-launch-button-bg); }
.fern-button-toggle { --phrond-button-active: var(--fern-accent-strong); }
.fern-button-toggle[aria-pressed="true"] { color: var(--fern-text-inverse); }
.fern-button-ghost { --phrond-button-text: var(--phrond-text-primary); --phrond-button-hover: var(--phrond-surface-control-hover); --phrond-button-active: var(--fern-selection); background: transparent; }
[data-fern-theme-toggle] { --fern-accent: var(--phrond-text-primary); --fern-selection: var(--phrond-surface-control-active); }
.fern-button-danger { color: var(--fern-danger); }
.fern-button-icon { width: 2.75rem; flex: 0 0 auto; aspect-ratio: 1; padding: 0; }
.fern-button-icon.fern-button-small { width: 2rem; }
.fern-button:disabled, .fern-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.fern-button:focus-visible, .fern-input:focus-visible, .fern-select:focus-visible { outline: 2px solid var(--fern-accent); outline-offset: 2px; }
.fern-panel { color: var(--phrond-text-primary); border: 1px solid var(--fern-control-border); border-radius: var(--fern-radius-card); padding: 1rem; }
/* Outermost panels are opaque; nested surfaces tint their actual surroundings. */
.fern-panel:not(:where(.fern-panel *, .fern-accordion *)) { background: var(--phrond-surface-panel); }
.fern-panel:where(.fern-panel *, .fern-accordion *), .fern-accordion { background: var(--fern-surface-soft); }
.fern-card-title { margin: 1rem 0 0; }
.fern-panel > p:last-child { margin-bottom: 0; padding-bottom: 0; }
.fern-panel-flat { border-radius: 0; padding: 0; border: 0; }
.fern-panel-header { margin-bottom: 1rem; }
.fern-input, .fern-select { min-height: 2rem; padding: .4rem .6rem; border: 1px solid var(--fern-control-border); border-radius: var(--fern-radius-control); background: var(--phrond-surface-control); color: var(--phrond-text-primary); }
.fern-input::placeholder { color: var(--phrond-text-muted); opacity: 1; }
.fern-select, :where([data-fern-shell="site"]) .project-font-additional summary, .fern-account-chooser-row { cursor: pointer; }
.fern-input:disabled, .fern-select:disabled { opacity: .5; }
.fern-input[type="checkbox"], .fern-input[type="radio"] { min-height: 0; padding: 0; accent-color: var(--fern-accent); margin: 0; }

/* Shared popup menu, including account and editor menus. */
.fern-menu-trigger, .site-nav-btn, .site-nav > a { border: 0; background: transparent; color: inherit; padding: .45rem .75rem; border-radius: var(--fern-radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.fern-submenu { position: absolute; inset: 100% auto auto 0; z-index: 1000; display: none; min-width: 11rem; margin: 0; padding: .35rem; list-style: none; border: 1px solid var(--fern-control-border); border-radius: var(--fern-radius-control); background: var(--fern-submenu-background); color: var(--phrond-text-primary); box-shadow: 0 8px 24px var(--phrond-shadow); }
.fern-menu:not([aria-disabled="true"]):is(:hover,.is-open) > .fern-submenu { display: block; }
.fern-submenu .fern-submenu { inset: 0 auto auto 100%; }
.fern-submenu form { margin: 0; }
.fern-submenu-item { display: flex; align-items: center; gap: .5rem; width: 100%; margin: 0; padding: .5rem .65rem; border: 0; border-radius: 999px; background: transparent; color: inherit; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.fern-submenu button.fern-submenu-item { appearance: none; box-sizing: border-box; text-align: left; }
.fern-submenu .fern-label { color: inherit; font: inherit; text-transform: none; letter-spacing: normal; }
.fern-submenu-item:is(:disabled,[aria-disabled="true"]) { opacity: .5; cursor: not-allowed; }
.fern-submenu-separator, .site-submenu-divider { height: 1px; margin: .35rem 0; background: var(--fern-divider-border); }
.fern-menu, :where([data-fern-shell="site"]) .fern-flow > .console-tile { position: relative; }
:where([data-fern-shell="simple"]) .border-inspect-lens.is-visible,:where([data-fern-shell="simple"]) .site-footer nav { display: block; }
.nav-dropdown > .fern-submenu { left: auto; right: 0; }

/* Shared navigation and branding; tools retain only their header layout. */
.fern-header-account { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.site-header, .fern-header { background: var(--phrond-surface-header); color: var(--phrond-text-primary); border-bottom: 1px solid var(--fern-divider-border); }
.fern-toolbar { background: var(--fern-toolbar); }
.fern-toolbar-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--fern-button-small-height, 2rem); padding: var(--fern-button-small-padding, .35rem .6rem); border: 1px solid var(--fern-control-border); border-radius: var(--fern-button-radius); background: var(--fern-toolbar-button-bg); color: var(--phrond-text-primary); text-decoration: none; white-space: nowrap; cursor: pointer; }
.fern-zoom-icon { width: 20px; height: 20px; }
.fern-toolbar-button-icon { width: 2rem; flex: 0 0 auto; aspect-ratio: 1; padding: 0; }
.fern-toolbar-button-compact { width: 1.75rem; height: 1.75rem; min-height: 1.75rem; padding: 0; border-radius: var(--fern-radius-control); }
.fern-toolbar-button:hover, .fern-close:hover { background: var(--fern-toolbar-button-hover); border-color: var(--fern-accent); }
.fern-toolbar-button:active, .fern-toolbar-button:is(.active,.is-active,.is-selected,.is-current,[aria-pressed="true"]) { background: var(--fern-selection); border-color: var(--fern-accent); }
.fern-toolbar-button:disabled, .fern-toolbar-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.fern-toolbar-button:focus-visible { outline: 2px solid var(--fern-accent); outline-offset: 2px; }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(1280px,100%); margin-inline: auto; }
.fern-marketing-header { --fern-brand-size: 2rem; --fern-header-padding: 1.25rem 2rem; }
.brand-product-lockup, .brand { display: flex; align-items: center; gap: .55rem; }
.fern-brand { color: var(--phrond-text-primary); font: 400 var(--fern-brand-size, 1.2rem)/1 var(--phrond-font-brand); text-decoration: none; }
.brand-product-name { color: var(--fern-accent); font: 600 1.2rem/1 var(--phrond-font-title); text-decoration: none; }
.brand-product-separator { color: var(--phrond-text-muted); font-weight: 300; }
.site-nav { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.site-nav > a, .site-nav-btn { display: inline-flex; align-items: center; gap: .35rem; }
.nav-arrow { width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.1rem) rotate(45deg); }
.mobile-menu-toggle, .fern-mobile-blocker, :where([data-fern-shell="simple"]) .variant-controls.is-hidden, :where([data-fern-shell="simple"]) .controls-layout.is-sidebar-collapsed .control-nav-section, :where([data-fern-shell="simple"]) .tool-options.is-hidden, :where([data-fern-shell="simple"]) .canvas-wrap[hidden], .fern-palette-status:empty { display: none; }
.fern-shared-footer, .site-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--phrond-text-muted); }
.fern-shared-footer nav, .site-footer nav { display: flex; gap: .35rem; }
@media (max-width: 760px) {
  .site-header-inner { flex-wrap: wrap; }
  .mobile-menu-toggle { display: inline-flex; flex-direction: column; gap: 4px; padding: .5rem; border: 0; background: transparent; color: inherit; }
  .hamburger-bar { width: 22px; height: 2px; background: currentColor; }
  .site-nav { order: 1; display: none; width: 100%; flex-direction: column; align-items: stretch; }
  .site-nav.is-open { display: flex; }
  .site-nav .fern-submenu { position: static; width: 100%; box-shadow: none; }
}
@media (max-width: 760px) {
  :where([data-fern-shell="site"]) .site-header-inner { gap: .5rem; }
  :where([data-fern-shell="site"]) .fern-marketing-header { --fern-brand-size: 1.75rem; }
  :where([data-fern-shell="site"]) .brand-product-name { font-size: 1rem; }
  :where([data-fern-shell="site"]) .brand-product-lockup { gap: .45rem; }
}
@media (max-width: 380px) {
  :where([data-fern-shell="site"]) .site-header-inner { gap: .35rem; }
  :where([data-fern-shell="site"]) .fern-marketing-header { --fern-brand-size: 1.5rem; }
  :where([data-fern-shell="site"]) .brand-product-name { font-size: .9rem; }
  :where([data-fern-shell="site"]) .brand-product-lockup { gap: .35rem; }
}
@media (max-width: 340px) {
  :where([data-fern-shell="site"]) .fern-marketing-header { --fern-brand-size: 1.3rem; }
  :where([data-fern-shell="site"]) .brand-product-name { font-size: .8rem; }
  :where([data-fern-shell="site"]) .brand-product-lockup { gap: .25rem; }
}

/* Dialog shell, reused by account and tool dialogs. */
.fern-dialog { position: fixed; inset: 0; width: min(620px,calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; margin: auto; padding: 0; border: 1px solid var(--fern-control-border); border-radius: var(--fern-radius-card); background: var(--phrond-surface-panel); color: var(--phrond-text-primary); box-shadow: 0 24px 80px var(--phrond-shadow); font-family: var(--phrond-font-body); height: fit-content; }
.fern-dialog::backdrop { background: var(--phrond-overlay); }
.fern-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--fern-divider-border); }
.fern-dialog-body, .fern-dialog .fern-color-editor-layout { padding: 1.25rem; }
.fern-dialog-desc, .fern-dialog-hint { margin: 0; padding: 1rem 1.25rem 0; color: var(--phrond-text-muted); }
.fern-dialog-kicker { margin: 0 0 .3rem; color: var(--phrond-text-muted); }
.fern-dialog-footer { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin: 0; padding: 1rem 1.25rem; }
.fern-close { --phrond-button-bg: var(--phrond-surface-control); --phrond-button-text: var(--phrond-text-primary); --phrond-button-active: var(--fern-selection); flex: 0 0 auto; width: 2rem; height: 2rem; min-height: 0; padding: 0; border-radius: var(--fern-radius-round); }

/* Opt-in desktop notice and loading feedback. */
@media screen and (max-width: 760px) {
  body:has(> .fern-mobile-blocker) > :not(.fern-mobile-blocker) { display: none !important; }
  body > .fern-mobile-blocker { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 2rem; background: var(--phrond-surface-page); color: var(--phrond-text-primary); text-align: center; }
  .fern-mobile-blocker-panel { max-width: 28rem; }
  .fern-mobile-blocker a { display: inline-block; margin-top: 1rem; text-decoration: underline; }
}
.fern-preview-loading { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; padding: 1rem; background: var(--phrond-surface-panel); color: var(--phrond-text-muted); text-align: center; }

/* Landing page layouts */
:where([data-fern-shell="site"]) input::placeholder, :where([data-fern-shell="site"]) textarea::placeholder, :where([data-fern-shell="site"]) .site-footer a:hover, :where([data-fern-shell="simple"]) .site-footer a:hover, :where([data-fern-shell="simple"]) .site-footer a:focus-visible { opacity: 1; }
:where([data-fern-shell="site"]) main { min-width: 0; width: 100%; }
:where([data-fern-shell="site"]) .page-shell { position: relative; z-index: 1; width: min(1280px, calc(100% - 3rem)); margin: 0 auto; padding: 0 0 3rem; }
:where([data-fern-shell="site"]) .site-header { position: sticky; top: 0; z-index: 200; width: 100%; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--phrond-tile-border); padding: var(--fern-header-padding, .75rem 2rem); margin-bottom: 2.5rem; }
:where([data-fern-shell="site"]) .site-header-inner { max-width: 1280px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative; min-width: 0; }
@media (min-width: 769px) and (max-width: 820px) {
  :where([data-fern-shell="site"]) .site-header { padding-inline: 1rem; }
}
@media (max-width: 768px) {
  :where([data-fern-shell="site"]) .page-shell { width: calc(100% - 2rem); }
  :where([data-fern-shell="site"]) .site-header { padding-left: 1rem; padding-right: 1rem; }
  :where([data-fern-shell="site"]) .site-nav.is-open { display: flex; }
  :where([data-fern-shell="site"]) .site-nav-btn { width: 100%; justify-content: space-between; }
}
:where([data-fern-shell="site"]) .fern-hero-container { width: 100%; margin-top: -2.5rem; margin-bottom: 2rem; }
:where([data-fern-shell="site"]) .fern-hero-banner { width: 100%; position: relative; background-image: var(--fern-hero-image, none); background-size: cover; background-position: center; }
:where([data-fern-shell="site"]) .fern-hero-overlay { width: 100%; padding: 3rem 0 1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--phrond-surface-page) 25%, transparent) 0%, color-mix(in srgb, var(--phrond-surface-page) 75%, transparent) 65%, var(--phrond-surface-page) 100%); }
:where([data-fern-shell="site"]) .fern-hero-banner-plain { background-image: none; }
:where([data-fern-shell="site"]) .fern-hero-banner-plain .fern-hero-overlay { background: none; }
:where([data-fern-shell="site"]) .fern-hero-overlay .page-shell { padding-bottom: 0; }
:where([data-fern-shell="site"]) .help-eyebrow { margin-bottom: 0.5rem; }
:where([data-fern-shell="site"]) .account-beta-request { margin-bottom: 1.5rem; }
:where([data-fern-shell="site"]) .fern-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.5rem; }
@media (max-width: 650px) {
  :where([data-fern-shell="site"]) .fern-grid-3 { grid-template-columns: 1fr; }
}
:where([data-fern-shell="site"]) .fern-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
:where([data-fern-shell="site"]) .help-page { display: grid; grid-template-columns: 12rem minmax(0, 42rem); gap: 3rem; max-width: 64rem; min-height: calc(100vh - 10rem); margin: 0 auto; padding: 3rem 1.5rem 5rem; }
:where([data-fern-shell="site"]) .help-topics { align-self: start; position: sticky; top: 2rem; }
:where([data-fern-shell="site"]) .help-topics nav, .fern-color-account-stack { display: grid; gap: 0.65rem; }
:where([data-fern-shell="site"]) .help-back-link { display: inline-block; margin-top: 2rem; }
:where([data-fern-shell="site"]) .help-content, :where([data-fern-shell="site"]) .fern-grid > *, :where([data-fern-shell="site"]) .fern-panel { min-width: 0; }
:where([data-fern-shell="site"]) .help-content header { padding-bottom: 2rem; border-bottom: 1px solid var(--phrond-border); }
:where([data-fern-shell="site"]) .help-content section { padding: 2rem 0; border-bottom: 1px solid var(--phrond-border); }
:where([data-fern-shell="site"]) .help-content p, :where([data-fern-shell="site"]) .help-content li { max-width: 42rem; }
:where([data-fern-shell="site"]) .help-content p + p { margin-top: 0.9rem; }
:where([data-fern-shell="site"]) .help-content ul { padding-left: 1.25rem; }
:where([data-fern-shell="site"]) .help-content code { padding: 0.1rem 0.25rem; }
@media (max-width: 760px) {
  :where([data-fern-shell="site"]) .help-page { display: block; padding-top: 2rem; }
  :where([data-fern-shell="site"]) .help-topics { position: static; padding-bottom: 2rem; border-bottom: 1px solid var(--phrond-border); }
  :where([data-fern-shell="site"]) .help-content { padding-top: 1rem; }
}
/* Numbered workflows share the same panels, headings and product accent. */
.fern-steps { padding: 0; margin: 1.5rem 0; list-style: none; counter-reset: fern-step; }
.fern-step { position: relative; padding-top: 1.75rem; counter-increment: fern-step; }
.fern-step::before { content: counter(fern-step); position: absolute; top: -1.1rem; left: 1.1rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--fern-accent-strong); color: var(--fern-text-inverse); }
.fern-stack { display: flex; flex-direction: column; gap: 1.25rem; }
:where([data-fern-shell="site"]) .fern-grid { --fern-grid-gap: 1.75rem; display: grid; gap: var(--fern-grid-gap); }
:where([data-fern-shell="site"]) .fern-grid-2 { grid-template-columns: 1fr 1fr; margin-bottom: 2rem; }
@media (max-width: 800px) {
  :where([data-fern-shell="site"]) .fern-grid-2 { grid-template-columns: 1fr; }
}
:where([data-fern-shell="site"]) .fern-stack > *,
:where([data-fern-shell="site"]) .fern-stack > .fern-grid,
:where([data-fern-shell="site"]) .fern-stack > .fern-grid-2 { margin-bottom: 0; }
:where([data-fern-shell="site"]) .console-tile { display: flex; flex-direction: column; transition: transform 150ms ease, border-color 150ms ease; }
:where([data-fern-shell="site"]) .console-tile:hover, :where([data-fern-shell="simple"]) .page-card:hover { transform: translateY(-2px); }
:where([data-fern-shell="site"]) .tile-artwork-frame { width: 100%; height: 240px; overflow: hidden; position: relative; border: 1px solid var(--fern-control-border); border-radius: var(--fern-radius-card); }
:where([data-fern-shell="site"]) .tile-artwork-frame img, :where([data-fern-shell="site"]) .fern-subtool-artwork-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 250ms ease; }
:where([data-fern-shell="site"]) .tile-artwork-frame .fern-image, :where([data-fern-shell="site"]) .fern-subtool-artwork-frame .fern-image { border: 0; border-radius: calc(var(--fern-radius-card) - 1px); }
:where([data-fern-shell="site"]) .console-tile:hover .tile-artwork-frame img { transform: scale(1.02); }
:where([data-fern-shell="site"]) .tile-artwork-frame > svg, :where([data-fern-shell="site"]) .fern-subtool-artwork-frame > svg { width: 100%; height: 100%; display: block; border-radius: calc(var(--fern-radius-card) - 1px); }
:where([data-fern-shell="site"]) .tile-label-bar { margin-top: 0.75rem; padding: 0.5rem 1rem; text-align: center; }
:where([data-fern-shell="site"]) .fern-grid-4 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1.25rem; }
:where([data-fern-shell="site"]) .fern-grid-4 .console-tile { height: 100%; }
@media (max-width: 900px) {
  :where([data-fern-shell="site"]) .fern-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 550px) {
  :where([data-fern-shell="site"]) .fern-grid-4 { grid-template-columns: 1fr; }
}
:where([data-fern-shell="site"]) .fern-subtool-artwork-frame { width: 100%; height: 150px; overflow: hidden; position: relative; border: 1px solid var(--fern-control-border); border-radius: var(--fern-radius-card); }
:where([data-fern-shell="site"]) .console-tile:hover .fern-subtool-artwork-frame img { transform: scale(1.03); }
:where([data-fern-shell="site"]) .site-footer { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--phrond-tile-border); display: flex; align-items: center; justify-content: space-between; opacity: 0.85; }
:where([data-fern-shell="site"]) .site-footer a, :where([data-fern-shell="simple"]) .site-footer a { transition: color 150ms ease, opacity 150ms ease; }
:where([data-fern-shell="site"]) .fern-demo-media { display: block; width: 100%; max-width: 720px; height: auto; margin: 1.5rem auto; }
.fern-image { border: 1px solid var(--fern-control-border); border-radius: var(--fern-radius-card); }
:where([data-fern-shell="site"]) .about-featured-postbox { width: 100%; margin-bottom: 2rem; }
:where([data-fern-shell="site"]) .about-featured-postbox .tile-artwork-frame { height: 420px; }
@media (max-width: 768px) {
  :where([data-fern-shell="site"]) .about-featured-postbox .tile-artwork-frame { height: 260px; }
}
:where([data-fern-shell="site"]) .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
:where([data-fern-shell="site"]) .pricing-card { display: flex; flex-direction: column; justify-content: space-between; position: relative; }
:where([data-fern-shell="site"]) .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--phrond-sundial-gold); color: var(--phrond-text-on-light); font-weight: 700; letter-spacing: 0.08em; padding: 0.25rem 0.65rem; border-radius: 4px; text-transform: uppercase; white-space: nowrap; }
:where([data-fern-shell="site"]) .pricing-price { margin: 0.75rem 0 0.25rem; }
:where([data-fern-shell="site"]) .pricing-features { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
:where([data-fern-shell="site"]) .pricing-features li { display: flex; align-items: flex-start; gap: 0.5rem; }
:where([data-fern-shell="site"]) .pricing-features li::before { content: "✦"; margin-top: 0.15rem; }
:where([data-fern-shell="site"]) .account-page-shell { width: min(760px, calc(100% - 3rem)); }
:where([data-fern-shell="site"]) .account-page-shell.account-library-projects-shell { width: min(1100px, calc(100% - 3rem)); }
:where([data-fern-shell="site"]) .account-form, :where([data-fern-shell="site"]) .project-font-additional { margin-top: 1.5rem; }
:where([data-fern-shell="site"]) .account-form p { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.account-page-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), .account-page-shell select, .account-page-shell textarea { width: 100%; }

:where([data-fern-shell="site"]) .account-form .helptext, :where([data-fern-shell="site"]) .account-form ul:not(.errorlist) { color: var(--phrond-text-muted); line-height: 1.5; }
:where([data-fern-shell="site"]) .errorlist { color: var(--fern-danger); list-style-position: inside; margin-bottom: 0.4rem; }
:where([data-fern-shell="site"]) .account-form .fern-button { margin-top: 0.5rem; }
.account-links, .fern-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1rem; }
:where([data-fern-shell="site"]) .account-status { color: var(--fern-success); margin: 1rem 0 1.5rem; }
:where([data-fern-shell="site"]) .account-sections { display: grid; gap: 2rem; }
:where([data-fern-shell="site"]) .account-dashboard-card { display: grid; gap: 0.25rem; padding: 1rem; }
:where([data-fern-shell="site"]) .account-category-links { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; }
:where([data-fern-shell="site"]) .account-category-links a, :where([data-fern-shell="site"]) .project-font-count, :where([data-fern-shell="site"]) .account-color-slot > span:last-child { white-space: nowrap; }
:where([data-fern-shell="site"]) .new-project-form { display: grid; gap: 0.55rem; margin-top: 2rem; }
:where([data-fern-shell="site"]) .new-project-form > div, :where([data-fern-shell="site"]) .project-google-font-controls { display: flex; gap: 0.65rem; }
:where([data-fern-shell="site"]) .new-project-form input { flex: 1; min-width: 0; }
:where([data-fern-shell="site"]) .project-sort-form { align-items: center; display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.5rem; margin-bottom: 1rem; }
:where([data-fern-shell="simple"]) .controls-layout.is-sidebar-collapsed .control-nav { padding: 0.55rem; }
:where([data-fern-shell="site"]) .project-card { display: grid; gap: 0.8rem; padding: 1rem; }
:where([data-fern-shell="site"]) .project-card-heading { align-items: baseline; display: flex; justify-content: space-between; gap: 1rem; }
:where([data-fern-shell="site"]) .project-summary { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; }
:where([data-fern-shell="site"]) .project-fonts-link { display: inline-flex; }
:where([data-fern-shell="site"]) .project-font-toolbar { margin-top: 1.25rem; }
:where([data-fern-shell="site"]) .project-font-additional form { padding-top: 1rem; }
:where([data-fern-shell="site"]) .project-local-font-controls { display: flex; gap: 0.65rem; margin-top: 1rem; }
:where([data-fern-shell="site"]) .project-local-font-controls input, :where([data-fern-shell="site"]) .project-google-font-controls input { flex: 1 1 auto; min-width: 0; }
:where([data-fern-shell="site"]) .account-section { border-top: 1px solid var(--phrond-tile-border); padding-top: 1.5rem; }
.color-set-card { background: var(--phrond-surface-panel); border: 1px solid var(--phrond-tile-border); border-radius: var(--fern-radius-card); margin-top: 1rem; padding: 1rem; }
.color-set-default { border-color: var(--phrond-sundial-gold); }
.color-set-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.color-set-heading p { color: var(--phrond-text-muted); margin: 0.25rem 0 0; }
.color-set-badge { color: var(--phrond-text-muted); white-space: nowrap; }
:where([data-fern-shell="site"]) .sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }
:where([data-fern-shell="site"]) .account-messages { margin: 1.25rem 0 1rem; padding: 0.85rem 1rem; }
:where([data-fern-shell="site"]) .account-color-editor, :where([data-fern-shell="simple"]) .control-nav ul, :where([data-fern-shell="simple"]) .controls-panel, :where([data-fern-shell="simple"]) .variant-controls { display: grid; gap: 1rem; }
:where([data-fern-shell="site"]) .account-color-slot { align-items: center; background: var(--phrond-surface-control); border: 1px solid var(--phrond-tile-border); border-radius: 6px; color: var(--phrond-text-muted); cursor: pointer; display: flex; gap: 0.45rem; min-width: 0; padding: 0.45rem; text-align: left; }
:where([data-fern-shell="site"]) .account-color-slot.is-active, :where([data-fern-shell="site"]) .account-color-slot:hover { background: color-mix(in srgb, var(--phrond-sundial-gold) 10%, transparent); border-color: var(--phrond-sundial-gold); color: var(--phrond-text-primary); }
.account-color-swatch { background: var(--swatch); border: 1px solid var(--phrond-border); border-radius: 5px; display: block; flex: 0 0 1.55rem; height: 1.55rem; width: 1.55rem; }
:where([data-fern-shell="site"]) .account-color-detail-heading { align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; }
.account-active-color-swatch { border: 1px solid var(--phrond-tile-border); border-radius: 5px; display: block; flex: 0 0 2rem; height: 2rem; width: 2rem; }
:where([data-fern-shell="site"]) .account-color-inputs label { display: grid; gap: 0.3rem; }
:where([data-fern-shell="site"]) .account-email-list { border-top: 1px solid var(--phrond-tile-border); margin-top: 2rem; padding-top: 1rem; }
:where([data-fern-shell="site"]) .fern-flow { --fern-flow-image-height: 240px; }
:where([data-fern-shell="site"]) .fern-flow > .console-tile:first-child { z-index: 1; }
:where([data-fern-shell="site"]) .fern-flow .tile-artwork-frame { height: var(--fern-flow-image-height); }
:where([data-fern-shell="site"]) .fern-flow-arrow { position: absolute; left: calc(100% + var(--fern-grid-gap) / 2); top: calc(0.75rem + var(--fern-flow-image-height) / 2); width: clamp(4rem, 10vw, 8rem); height: auto; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; fill: color-mix(in srgb, var(--phrond-text-muted) 55%, var(--phrond-tile-bg)); stroke: var(--phrond-sundial-gold); stroke-width: 1px; stroke-linejoin: round; }
:where([data-fern-shell="site"]) .fern-flow-arrow path { vector-effect: non-scaling-stroke; }
:where([data-fern-shell="site"]) .fern-flow-images .tile-artwork-frame, :where([data-fern-shell="site"]) .fern-flow-images .tile-artwork-frame img { height: auto; }
:where([data-fern-shell="site"]) .fern-flow-images .fern-flow-arrow { top: 50%; }
:where([data-fern-shell="site"]) .fern-flow-images .fern-flow-arrow-ornate { width: clamp(8rem, 14vw, 12rem); }
@media (max-width: 800px) {
  :where([data-fern-shell="site"]) .fern-flow-images .fern-flow-arrow, :where([data-fern-shell="site"]) .fern-flow-arrow { left: 50%; top: auto; bottom: calc(var(--fern-grid-gap) / -2); transform: translate(-50%, 50%) rotate(90deg); }
  :where([data-fern-shell="site"]) .fern-flow-images .fern-flow-arrow-ornate { width: 7.5rem; }
}

/* Shared simple-tool layouts */
:where([data-fern-shell="simple"]) .page-shell { width: min(1280px, calc(100% - 3rem)); margin: 0 auto; padding: 0 0 3rem; }
:where([data-fern-shell="simple"]) .site-header { position: sticky; top: 0; z-index: 200; width: 100%; margin-bottom: 2.5rem; padding: 0.75rem 2rem; border-bottom: 1px solid var(--phrond-tile-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
:where([data-fern-shell="simple"]) .site-header-inner { display: flex; align-items: center; justify-content: space-between; position: relative; width: 100%; max-width: 1280px; margin: 0 auto; }
@media (min-width: 769px) and (max-width: 820px) {
  :where([data-fern-shell="simple"]) .site-header { padding-inline: 1rem; }
}
:where([data-fern-shell="simple"]) .hero, :where([data-fern-shell="simple"]) .page-intro { display: grid; gap: 1.5rem; margin-bottom: 2rem; }
:where([data-fern-shell="simple"]) .hero { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr); align-items: stretch; }
:where([data-fern-shell="simple"]) .hero-copy { padding: clamp(1.8rem, 4vw, 4rem); }
:where([data-fern-shell="simple"]) .hero-panel, :where([data-fern-shell="simple"]) .feature-card, :where([data-fern-shell="simple"]) .control-nav, :where([data-fern-shell="simple"]) .controls-panel { padding: 1.4rem; }
:where([data-fern-shell="simple"]) .eyebrow { margin: 0 0 0.8rem; }
:where([data-fern-shell="simple"]) .lede { max-width: 60ch; }
:where([data-fern-shell="simple"]) .hero-actions, :where([data-fern-shell="simple"]) .page-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.2rem; }
:where([data-fern-shell="simple"]) .button-use-motif, :where([data-fern-shell="simple"]) .btn-done-motif { transition: all 150ms ease; }
:where([data-fern-shell="simple"]) .hero-panel p { margin-top: 0; }
:where([data-fern-shell="simple"]) .hero-list, :where([data-fern-shell="simple"]) .control-nav ul { margin: 0; padding: 0; list-style: none; }
:where([data-fern-shell="simple"]) .hero-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--phrond-border); }
:where([data-fern-shell="simple"]) .hero-list li:first-child { border-top: 0; }
:where([data-fern-shell="simple"]) .section-grid, :where([data-fern-shell="simple"]) .content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
:where([data-fern-shell="simple"]) .page-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
:where([data-fern-shell="simple"]) .page-card { display: block; padding: 1.4rem; transition: transform 150ms ease, border-color 150ms ease; }
:where([data-fern-shell="simple"]) .page-card svg { width: 80%; height: 80%; }
:where([data-fern-shell="simple"]) .card-preview { width: 70%; text-align: center; height: auto; margin: 0 auto; }
.feature-card p { color: var(--phrond-text-primary); line-height: 1.65; }
:where([data-fern-shell="simple"]) .controls-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.25rem; }
:where([data-fern-shell="simple"]) .border-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
:where([data-fern-shell="simple"]) .border-inspect-controls { display: inline-flex; align-items: center; gap: 0.55rem; }
:where([data-fern-shell="simple"]) .border-inspect-controls .fern-icon { vertical-align: middle; }
:where([data-fern-shell="simple"]) .border-inspect-zoom { display: inline-flex; align-items: center; gap: 0.35rem; }
:where([data-fern-shell="simple"]) .border-inspect-lens { position: absolute; z-index: 5; display: none; width: 164px; height: 164px; overflow: hidden; pointer-events: none; }
:where([data-fern-shell="simple"]) .border-inspect-lens svg { width: 100%; height: 100%; }
:where([data-fern-shell="simple"]) .motif-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.5rem; align-items: start; }
:where([data-fern-shell="simple"]) .motif-type-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.motif-preview-frame { position: relative; display: grid; place-items: center; min-height: 260px; padding: 1rem; border: 1px solid var(--phrond-border); border-radius: 6px; background: var(--phrond-surface-panel); overflow: visible; }
.motif-preview-frame .mechanical-svg { width: min(100%, 300px); height: auto; }
.motif-preview-frame .mechanical-run-svg { width: min(100%, 780px); max-width: 780px; height: auto; display: block; }
:where([data-fern-shell="simple"]) .variant-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: 0.7rem 1rem; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; }
:where([data-fern-shell="simple"]) .motif-card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 80px; min-height: 0; height: auto; padding: 0.15rem 0.2rem; appearance: none; cursor: pointer; }
:where([data-fern-shell="simple"]) .motif-card img, :where([data-fern-shell="simple"]) .motif-card svg { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; }
:where([data-fern-shell="simple"]) .motif-card span { display: block; text-align: center; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
:where([data-fern-shell="simple"]) .motif-card:focus-visible { outline-offset: 2px; }
:where([data-fern-shell="simple"]) .control-card { padding: 1.2rem; }
:where([data-fern-shell="simple"]) .dual-scales-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; }
:where([data-fern-shell="simple"]) .scale-control-card { display: flex; flex-direction: column; gap: 0.2rem; }
:where([data-fern-shell="simple"]) .scale-control-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.35rem; }
:where([data-fern-shell="simple"]) .caption-controls { display: grid; gap: 0.55rem; }
.slider-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
:where([data-fern-shell="simple"]) output { min-width: 5.5rem; padding: 0.5rem 0.75rem; text-align: center; }
.slider-wrap { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 1rem; color: var(--phrond-text-primary); }
.slider-step { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--phrond-border); border-radius: 4px; background: var(--phrond-surface-panel); color: var(--phrond-text); cursor: pointer; }
.slider-step:hover, .slider-step:focus-visible { border-color: var(--phrond-accent-soft); background: var(--phrond-selected); }
:where([data-fern-shell="simple"]) .check-wrap { display: flex; align-items: center; gap: 0.85rem; }
:where([data-fern-shell="simple"]) .check-options { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; }
:where([data-fern-shell="simple"]) .check-wrap input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin: 0; }
input[type="range"] { width: 100%; accent-color: var(--flourish-highlight); }
:where([data-fern-shell="simple"]) .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--phrond-tile-border); opacity: 0.85; }
@media (max-width: 900px) {
  :where([data-fern-shell="simple"]) .hero, :where([data-fern-shell="simple"]) .page-grid, :where([data-fern-shell="simple"]) .section-grid, :where([data-fern-shell="simple"]) .content-grid, :where([data-fern-shell="simple"]) .dual-scales-group { grid-template-columns: 1fr; }
  :where([data-fern-shell="simple"]) .motif-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  :where([data-fern-shell="simple"]) .site-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 768px) {
  :where([data-fern-shell="simple"]) .site-header { padding-inline: 1rem; }
  :where([data-fern-shell="simple"]) .site-nav.is-open { display: flex; }
}
:where([data-fern-shell="simple"]) .controls-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.15rem; align-items: stretch; }
:where([data-fern-shell="simple"]) .control-nav { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 1.4rem; }
:where([data-fern-shell="simple"]) .controls-layout.is-sidebar-collapsed { grid-template-columns: 58px minmax(0, 1fr); }
@media (max-width: 820px) {
  :where([data-fern-shell="simple"]) .controls-layout { grid-template-columns: 280px minmax(0, 1fr); }
  :where([data-fern-shell="simple"]) .controls-layout.is-sidebar-collapsed { grid-template-columns: 58px minmax(0, 1fr); }
}
:where([data-fern-shell="simple"]) .controls-panel-container { display: flex; flex-direction: column; height: 100%; min-width: 0; }
:where([data-fern-shell="simple"]) .controls-panel { box-sizing: border-box; padding: 1.25rem; height: 100%; }
:where([data-fern-shell="simple"]) .studio-view.controls-panel:not(.is-hidden) { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; }
:where([data-fern-shell="simple"]) .control-nav ul, :where([data-fern-shell="simple"]) .motif-nav-list { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
:where([data-fern-shell="simple"]) .aesthetic-nav-grid, :where([data-fern-shell="simple"]) .arrow-geometry-controls { display: grid; gap: 0.45rem; }
:where([data-fern-shell="simple"]) .control-nav .motif-nav-item { width: 100%; justify-content: space-between; min-height: 2.75rem; padding: 0.6rem 0.85rem; }
:where([data-fern-shell="simple"]) .control-nav-section { display: grid; gap: 0.55rem; margin-top: 1rem; }
:where([data-fern-shell="simple"]) .control-nav-section:first-child, :where([data-fern-shell="simple"]) .sidebar-heading + .control-nav-section { margin-top: 0; }
:where([data-fern-shell="simple"]) .control-nav > h3 { margin-bottom: .55rem; }
:where([data-fern-shell="simple"]) .control-nav > .control-nav-section + h3 { margin: 1.25rem 0 .55rem; }
:where([data-fern-shell="simple"]) .control-nav > h3 + .control-nav-section { margin-top: 0; }
:where([data-fern-shell="simple"]) .control-nav .control-card { padding: 0.75rem; box-sizing: border-box; width: 100%; }
.control-nav .slider-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.control-nav .slider-head output { min-width: 3.2rem; padding: 0.2rem 0.4rem; }
.color-controls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.color-field { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; color: var(--phrond-text-muted); cursor: pointer; }
.color-field > input[type="color"] { pointer-events: none; }
.color-field > input[type="color"] { order: -1; }
.color-field input[type="color"] { -webkit-appearance: none; width: 100%; height: 2.2rem; padding: 2px; border: 1px solid var(--phrond-tile-border); border-radius: 4px; background: transparent; cursor: pointer; }
.color-field input[type="color"]::-webkit-color-swatch-wrapper, :where([data-fern-shell="simple"]) .control-set .control-card, .fern-account-chooser-shell { padding: 0; }
.color-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }
:where([data-fern-shell="simple"]) [data-flourish-saved-color-set] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 2.4rem; padding: 0.4rem 0.65rem; border: 1px solid var(--phrond-tile-border); border-radius: 4px; background: var(--phrond-surface-panel); color: var(--phrond-text-primary); }
.fern-dialog-compact input[type="range"], :where([data-fern-shell="simple"]) .studio-actions-grid .fern-button, :where([data-fern-shell="simple"]) .border-tab-panel, :where([data-fern-shell="simple"]) .flower-workspace .motif-card, .draw-color-inputs input[type="text"], .draw-toolbar-color-controls input[type="text"] { width: 100%; }
.fern-dialog-compact input[type="range"]::-webkit-slider-thumb, .fern-dialog-compact input[type="range"]::-moz-range-thumb { box-shadow: none; }
:where([data-fern-shell="simple"]) .studio-actions-grid { display: grid; gap: 0.5rem; }
:where([data-fern-shell="simple"]) .status-msg { color: var(--phrond-sundial-gold); min-height: 1.2rem; text-align: center; }
:where([data-fern-shell="simple"]) .motif-config-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.35rem; }
.border-canvas-container { position: relative; width: 100%; max-width: 100%; padding: 1.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all 200ms ease; margin: 0; box-sizing: border-box; }
.border-canvas-container.aspect-square, .border-canvas-container.aspect-landscape { max-height: 410px; width: 100%; }
.border-canvas-container.aspect-portrait { max-height: 420px; width: 100%; }
.border-canvas-container.aspect-widescreen { max-height: 360px; width: 100%; }
.border-canvas-container.is-collapsed-horizontal { aspect-ratio: 4 / 1 !important; max-height: 260px !important; width: 100% !important; max-width: 100% !important; }
.border-canvas-container svg { width: 100%; height: 100%; max-height: 100%; display: block; }
:where([data-fern-shell="simple"]) .flower-control-tab { display: flex; flex-direction: column; gap: 0.75rem; }
:where([data-fern-shell="simple"]) .flower-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 1rem; }
:where([data-fern-shell="simple"]) .flower-visual-column, :where([data-fern-shell="simple"]) .flower-controls-column { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
:where([data-fern-shell="simple"]) .flower-visual-column { position: sticky; top: 0.5rem; }
.flower-visual-column .motif-preview-frame { min-height: 0; padding: 0.35rem; aspect-ratio: 1; }
.flower-visual-column .mechanical-run-svg { width: 100%; height: auto; aspect-ratio: 1; }
:where([data-fern-shell="simple"]) .flower-workspace .motif-grid { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
:where([data-fern-shell="simple"]) .flower-workspace .control-options-row { gap: 0.35rem 0.75rem; }
@media (max-width: 760px) {
  :where([data-fern-shell="simple"]) .flower-workspace { grid-template-columns: minmax(0, 1fr); }
  :where([data-fern-shell="simple"]) .flower-visual-column { position: static; }
}
:where([data-fern-shell="simple"]) .control-set { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.65rem; }
:where([data-fern-shell="simple"]) .control-set.border-controls-bar { padding: 0.65rem; }
:where([data-fern-shell="simple"]) .border-controls-bar { display: flex; flex-direction: column; gap: 0.65rem; width: 100%; padding-top: 0.35rem; }
:where([data-fern-shell="simple"]) .border-control-group { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; }
:where([data-fern-shell="simple"]) .control-options-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; width: 100%; }
:where([data-fern-shell="simple"]) .rock-count-controls { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
:where([data-fern-shell="simple"]) .rock-count-controls [role="radiogroup"] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; }
:where([data-fern-shell="simple"]) .segmented-control { display: flex; overflow: hidden; }
:where([data-fern-shell="simple"]) .image-upload-row { display: flex; gap: 0.5rem; }
:where([data-fern-shell="simple"]) .caption-input { width: 100%; }
input.slider-value { box-sizing: border-box; width: 4.5rem; min-width: 0; padding: .2rem .3rem; border: 1px solid var(--phrond-tile-border); border-radius: 4px; color: var(--phrond-text-primary); background: var(--phrond-surface-panel); font-weight: 700; text-align: center; appearance: textfield; }
.slider-value::-webkit-inner-spin-button, .slider-value::-webkit-outer-spin-button { appearance: none; margin: 0; }
.control-nav .slider-head .slider-value { width: 3.2rem; }

/* Shared simple-tool layouts */
:where([data-fern-shell="simple"]) .control-nav .caption-input { min-height: 5.5rem; resize: vertical; }
:where([data-fern-shell="simple"]) .control-nav .control-options-row { gap: 0.75rem; }
:where([data-fern-shell="simple"]) .tool-options { display: grid; gap: 0.55rem; padding-top: 0.15rem; }
:where([data-fern-shell="simple"]) .tool-options > h3 { margin: 0; }
:where([data-fern-shell="simple"]) .tool-button-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where([data-fern-shell="simple"]) .annotation-color-grid { grid-template-columns: repeat(2, 1fr); }
.tool-slider { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) 2.8rem; align-items: center; gap: 0.4rem; color: var(--phrond-text-muted); }
.tool-slider input { min-width: 0; width: 100%; max-width: 100%; }
.tool-slider input[type="number"], .control-nav .slider-head input[type="number"] { box-sizing: border-box; min-width: 0; padding: 0.2rem 0.3rem; border: 1px solid var(--phrond-tile-border); border-radius: 4px; color: var(--phrond-text-primary); background: var(--phrond-surface-panel); font-weight: 700; text-align: center; appearance: textfield; }
.tool-slider input[type="number"] { width: 2.8rem; }
.control-nav .slider-head input[type="number"] { width: 3.2rem; }
.tool-slider input[type="number"]::-webkit-inner-spin-button, .tool-slider input[type="number"]::-webkit-outer-spin-button, .control-nav .slider-head input[type="number"]::-webkit-inner-spin-button, .control-nav .slider-head input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
:where([data-fern-shell="simple"]) .empty-state { max-width: 430px; padding: 1.5rem 2rem; text-align: center; }
:where([data-fern-shell="simple"]) .empty-art { width: min(260px, 80%); margin: auto; }
:where([data-fern-shell="simple"]) .empty-art svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
:where([data-fern-shell="simple"]) .empty-art .empty-arrow, :where([data-fern-shell="simple"]) .empty-art .empty-circle { stroke: var(--annotate-highlight); stroke-width: 3; }
:where([data-fern-shell="simple"]) .canvas-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
:where([data-fern-shell="simple"]) #annotation-canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 360px; cursor: default; touch-action: none; }
:where([data-fern-shell="simple"]) .workspace-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.75rem; }
:where([data-fern-shell="simple"]) .workspace-actions [data-action="export"] { margin-left: auto; }
:where([data-fern-shell="simple"]) .canvas-footer { display: flex; justify-content: space-between; gap: 1rem; min-height: 1.2rem; padding-top: 0.55rem; }
@media (max-width: 820px) {
  :where([data-fern-shell="simple"]) .controls-layout { grid-template-columns: minmax(0, 1fr); }
  :where([data-fern-shell="simple"]) .control-nav { order: 2; height: auto; }
  :where([data-fern-shell="simple"]) .controls-panel-container { order: 1; height: auto; }
  :where([data-fern-shell="simple"]) .studio-view.controls-panel:not(.is-hidden) { height: auto; }
}
@media (max-width: 600px) {
  :where([data-fern-shell="simple"]) .page-shell { width: 100%; padding-bottom: 0; }
  :where([data-fern-shell="simple"]) .site-header { margin-bottom: 0; }
  :where([data-fern-shell="simple"]) .controls-layout { gap: 0; }
  :where([data-fern-shell="simple"]) .control-nav, :where([data-fern-shell="simple"]) .workspace-panel { border-inline: 0; }
  :where([data-fern-shell="simple"]) .control-nav { padding: 1rem; }
  :where([data-fern-shell="simple"]) .studio-view.controls-panel:not(.is-hidden) { padding: 0 0 0.75rem; }
  :where([data-fern-shell="simple"]) .annotate-canvas-frame { min-height: 0; max-height: none; padding: 0; }
  :where([data-fern-shell="simple"]) .canvas-wrap { height: auto; }
  :where([data-fern-shell="simple"]) #annotation-canvas { width: 100%; max-height: none; }
  :where([data-fern-shell="simple"]) .workspace-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 0.2rem; padding: 0.5rem 0.4rem 0; }
  :where([data-fern-shell="simple"]) .workspace-actions .fern-button { min-width: 0; white-space: nowrap; }
  :where([data-fern-shell="simple"]) .workspace-actions [data-action="export"] { margin-left: 0; }
  :where([data-fern-shell="simple"]) .canvas-footer { padding-inline: 0.75rem; }
  :where([data-fern-shell="simple"]) .site-footer { padding-inline: 1rem; padding-bottom: 1rem; }
}
@media (max-width: 360px) {
  :where([data-fern-shell="simple"]) .site-header { padding-inline: 0.75rem; }
}

/* Shared palette controls */
.fern-color-grid { display: grid; gap: 0.45rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fern-color-editor-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr); }
.fern-color-picker-group, .fern-inline-picker { display: grid; gap: 0.3rem; }
.fern-color-picker-surface { border: 1px solid var(--phrond-tool-border, var(--phrond-tile-border)); border-radius: 7px; cursor: crosshair; min-height: 9rem; overflow: hidden; position: relative; touch-action: none; }
.fern-color-picker-thumb { border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; height: 0.85rem; pointer-events: none; position: absolute; transform: translate(-50%, -50%); width: 0.85rem; }
.fern-color-picker-hue, .inspector-row .fern-color-picker-hue { appearance: none; background: linear-gradient(to right, #f00 0%, #ff0 16.6%, #0f0 33.3%, #0ff 50%, #00f 66.6%, #f0f 83.3%, #f00 100%); border: 1px solid var(--phrond-tool-border, var(--phrond-tile-border)); border-radius: 999px; cursor: pointer; height: 1rem; margin: 0; padding: 0; width: 100%; }
.fern-color-picker-hue::-webkit-slider-thumb { appearance: none; background: #1a1a1a; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; height: 1rem; width: 1rem; }
.fern-color-picker-hue::-moz-range-thumb { background: #1a1a1a; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; height: 0.8rem; width: 0.8rem; }
.fern-color-account-controls { display: grid; gap: 0.65rem; margin-top: 1rem; }
.fern-color-account-controls label { display: grid; gap: 0.35rem; }
.fern-color-account-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.control-nav .fern-color-account-actions { flex-wrap: nowrap; }
.control-nav .fern-color-account-actions .fern-button { flex: 1; min-width: 0; white-space: nowrap; }
@media (max-width: 768px) {
  .fern-color-editor-layout { grid-template-columns: 1fr; }
}
.fern-account-chooser-desc { margin: 0; padding: 1.25rem 1.5rem 0; color: var(--dash-text-muted, var(--fern-text-soft, var(--phrond-text-muted))); }
.fern-account-chooser-list { display: grid; gap: 8px; margin: 1rem 1.5rem 0; min-height: 8rem; max-height: 12rem; overflow: auto; }
.fern-account-chooser-row, .fern-account-chooser-empty { box-sizing: border-box; width: 100%; min-height: 3.2rem; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--dash-border, var(--fern-border, var(--phrond-tool-border, var(--phrond-tile-border)))); border-radius: var(--radius-control, 7px); background: var(--dash-control, var(--fern-control, var(--phrond-surface-control, transparent))); color: var(--dash-text, var(--fern-text, var(--phrond-text-primary))); text-align: left; }
.fern-account-chooser-row:hover, .fern-account-chooser-row:focus-visible, .fern-account-chooser-row.is-selected { border-color: var(--fern-accent); background: var(--fern-selection); outline: none; }
.fern-account-chooser-radio { width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid var(--dash-border-strong, var(--fern-border-strong, var(--phrond-tool-border, var(--phrond-tile-border)))); border-radius: 999px; background: var(--dash-panel, var(--fern-panel, var(--phrond-surface-panel))); box-shadow: inset 0 0 0 4px var(--dash-panel, var(--fern-panel, var(--phrond-surface-panel))); }
.fern-account-chooser-row.is-selected .fern-account-chooser-radio { border-color: var(--fern-accent); background: var(--fern-accent); }
.fern-account-chooser-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.fern-account-chooser-empty { color: var(--dash-text-muted, var(--fern-text-soft, var(--phrond-text-muted))); }
.fern-account-chooser-item-name, .fern-account-chooser-new { display: grid; gap: 7px; margin: 1.25rem 1.5rem 0; color: var(--dash-text-muted, var(--fern-text-soft, var(--phrond-text-muted))); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.fern-palette-text { display: grid; gap: .5rem; margin-top: .85rem; min-width: 0; }
.fern-palette-text details { display: grid; gap: .4rem; }
.fern-palette-text summary { cursor: pointer; margin-bottom: .4rem; }
.fern-palette-text textarea { box-sizing: border-box; width: 100%; resize: vertical; }
.fern-palette-dialog .fern-color-editor-layout { align-items: start; }
.fern-palette-dialog .fern-palette-detail { display: grid; gap: .6rem; margin: 0; padding: .75rem; border: 1px solid var(--phrond-tile-border); border-radius: var(--fern-radius-card); background: var(--fern-surface-soft); }
.fern-palette-slot { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .45rem; border: 1px solid var(--phrond-tile-border); border-radius: 4px; color: var(--phrond-text-muted); background: var(--phrond-surface-control); cursor: pointer; text-align: left; }
.fern-palette-slot.is-active, .fern-palette-slot:hover { border-color: var(--phrond-accent-soft); color: var(--phrond-text-primary); background: var(--phrond-selected); }
.fern-palette-swatch { display: block; width: 1.55rem; height: 1.55rem; flex: 0 0 1.55rem; border: 1px solid var(--phrond-border); border-radius: 3px; }
.fern-palette-dialog .fern-input { width: 100%; min-width: 0; }
.fern-new-color-set-fields { display: grid; gap: .85rem; }
.fern-new-color-set-fields textarea { box-sizing: border-box; width: 100%; resize: vertical; }
[data-new-color-set-dialog] { overflow: hidden; }
[data-new-color-set-form] { display: flex; flex-direction: column; max-height: calc(min(680px, 100vh - 32px) - 2px); }
[data-new-color-set-form] > .fern-dialog-header, [data-new-color-set-form] > .fern-dialog-footer { flex-shrink: 0; }
[data-new-color-set-form] > .fern-dialog-body { min-height: 0; overflow: auto; }

/* Shared palette controls */

.fern-dialog-compact { width: min(400px, calc(100vw - 32px)); }

.fern-color-fields { display: grid; gap: .75rem; }

.fern-active-color-swatch { width: 2rem; height: 2rem; border: 1px solid var(--fern-control-border); border-radius: var(--fern-radius-swatch); }

.fern-color-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

.fern-dialog-rule { margin: 1rem 0; border: 0; border-top: 1px solid var(--fern-divider-border); }


:where([data-fern-shell="editor"]) .phrond-brand, :where([data-fern-shell="editor"]) .brand-product-name {
  text-decoration: none;
}

:where([data-fern-shell="editor"]) .layout-handoff-prompt a {
  color: var(--dash-accent-hover);
  font-weight: 700;
  text-decoration: none;
}

:where([data-fern-shell="editor"]) .layout-handoff-prompt a:hover, :where([data-fern-shell="editor"]) .layout-handoff-prompt a:focus-visible {
  color: var(--dash-text);
  text-decoration: underline;
  outline: none;
}

:where([data-fern-shell="editor"]) .explorer-header .fern-button { text-decoration: none; }


:where([data-fern-shell="site"]) .project-font-toolbar .library-search,
:where([data-fern-shell="site"]) .project-local-font-controls .library-search {
  flex: 1 1 20rem;
}
:where([data-fern-shell="site"]) .library-toolbar {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin: 2rem 0 1rem;
}
:where([data-fern-shell="site"]) .library-search { flex: 1; min-width: 0; }
:where([data-fern-shell="site"]) .library-sort {
  align-items: center;
  color: var(--phrond-text-muted);
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}
:where([data-fern-shell="site"]) .library-filter-group { display: inline-flex; align-items: center; white-space: nowrap; }
:where([data-fern-shell="site"]) .library-filter-group > [data-library-filter] { margin-right: 0; }
:where([data-fern-shell="site"]) .library-filter-group:has(.library-filter-add) > [data-library-filter] { padding-right: .1rem; }
:where([data-fern-shell="site"]) .library-table {
  border-collapse: collapse;
  margin-top: 1.25rem;
  width: 100%;
}
:where([data-fern-shell="site"]) .library-table th,
:where([data-fern-shell="site"]) .library-table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  vertical-align: middle;
}
:where([data-fern-shell="site"]) .library-table-head {
  color: var(--phrond-sundial-gold);
  font-family: var(--phrond-font-title);
  letter-spacing: 0.06em;
  padding-bottom: 0.6rem;
  text-transform: uppercase;
}
:where([data-fern-shell="site"]) .library-row {
  border-top: 1px solid var(--phrond-tile-border);
}
:where([data-fern-shell="site"]) .library-row:hover {
  background: color-mix(in srgb, var(--phrond-sundial-gold) 5%, transparent);
}
:where([data-fern-shell="site"]) .library-item-name {
  min-width: 0;
}
:where([data-fern-shell="site"]) .library-item-name strong {
  color: var(--phrond-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where([data-fern-shell="site"]) .library-item-icon {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--phrond-sundial-gold);
  display: flex;
  height: 2.8rem;
  justify-content: center;
  padding: 0;
  width: 2.8rem;
}
:where([data-fern-shell="site"]) .library-actions-cell {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
:where([data-fern-shell="site"]) .library-row-action {
  align-items: center;
  color: var(--phrond-sundial-gold);
  display: inline-flex;
  height: 1.25rem;
  white-space: nowrap;
}
:where([data-fern-shell="site"]) .library-danger-action {
  color: var(--fern-danger);
}
:where([data-fern-shell="site"]) .library-inline-rename {
  align-items: center;
  display: flex;
  gap: 0.35rem;
  min-width: 0;
}
:where([data-fern-shell="site"]) .library-inline-rename input {
  min-width: 8rem;
  width: min(18rem, 100%);
}
:where([data-fern-shell="site"]) .library-project-form select {
  max-width: 9rem;
}
@media (max-width: 650px) {
  :where([data-fern-shell="site"]) .library-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}
@media (max-width: 650px) {
  :where([data-fern-shell="site"]) .library-table {
    display: block;
    overflow-x: auto;
  }
}
@media (max-width: 650px) {
  :where([data-fern-shell="site"]) .library-table th,
  :where([data-fern-shell="site"]) .library-table td {
    white-space: nowrap;
  }
}
/* Tabs are navigation, separate from the two action-button sizes. */
.library-filter-add { border: 0; background: transparent; color: var(--phrond-text-muted); cursor: pointer; }

.brand-lockup {
  display: grid;
  gap: 0;
}

.brand-lockup > .brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 340px;
  min-height: 48px;
  padding: 0 0.75rem;
  border-right: 1px solid var(--fern-divider-border);
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--fern-text);
  white-space: nowrap;
}

.fern-tabset { display: flex; align-items: end; flex-wrap: wrap; gap: .5rem; width: 100%; border-bottom: 1px solid var(--fern-control-border); margin: .75rem 0; }

.fern-tab { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .75rem .9rem; background: transparent; color: var(--phrond-text-muted); cursor: pointer; }

.fern-tab:is(.active,.is-active,[aria-selected="true"]) { border-bottom-color: var(--fern-accent); color: var(--phrond-text-primary); }

.fern-tab:hover, .fern-tab:focus-visible { background: var(--fern-surface-soft); color: var(--phrond-text-primary); }

.fern-tab:disabled { opacity: .4; cursor: not-allowed; }

.fern-description { margin: 0 0 .25rem; color: var(--phrond-text-muted); font-size: .9rem; line-height: 1.4; }

.fern-lead { margin-top: 0; font-size: 1.125rem; }
.fern-lead:last-child { margin-bottom: 0; }

.fern-submenu-arrow { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; margin-left: .35rem; }

.fern-submenu-item > .fern-submenu-arrow { margin-left: auto; }

:is(.fern-menu-trigger,.site-nav-btn,.fern-submenu-item,.site-nav > a):is(:hover,:focus-visible),.fern-menu:is(:hover,.is-open) > :is(.fern-menu-trigger,.site-nav-btn) { background: var(--fern-menu-hover); color: var(--phrond-text-primary); }

/* Shared accordions. The container clips the full-width trigger to its corners. */

.fern-accordion { border: 1px solid var(--fern-control-border); border-radius: var(--fern-radius-card); overflow: hidden; }

.fern-accordion-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .85rem 1rem; border: 0; background: transparent; color: inherit; font-weight: 600; text-align: left; list-style: none; cursor: pointer; }

.fern-accordion-toggle:hover { background: var(--fern-toolbar); }

.fern-accordion-toggle:focus-visible { outline: 2px solid var(--fern-accent); outline-offset: -2px; }

.fern-accordion-indicator { color: var(--fern-accent); }

.fern-accordion-toggle[aria-expanded="true"] .fern-accordion-indicator path:last-child, .fern-accordion[open] > .fern-accordion-toggle .fern-accordion-indicator path:last-child { display: none; }

.fern-accordion-body { display: flex; flex-direction: column; gap: .75rem; padding: .85rem; border-top: 1px solid var(--fern-control-border); }

.fern-accordion.collapsed > .fern-accordion-body { display: none; }

/* Shared sidebar disclosure; each app owns its sidebar dimensions. */

.fern-sidebar-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .55rem .65rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }

.fern-sidebar-toggle:focus-visible { outline: 2px solid var(--fern-accent); outline-offset: -2px; }

.fern-sidebar-toggle .sidebar-tool-icon { display: none; }

.fern-sidebar-toggle[aria-expanded="false"] { flex-direction: column; justify-content: flex-start; }

.fern-sidebar-toggle[aria-expanded="false"] .sidebar-toggle-copy { display: none; }

.fern-sidebar-toggle[aria-expanded="false"] .sidebar-tool-icon { display: inline-block; }

.fern-sidebar-toggle[aria-expanded="false"] .sidebar-toggle-indicator { transform: rotate(180deg); }

.fern-modal { position: fixed; inset: 0; z-index: 1000; background: var(--phrond-overlay); }

.fern-submenu-item.is-current::after { content: "✓"; margin-left: auto; color: var(--fern-accent); }