/* Layzbooks pieces that stay on whatever the colours: the 3D mark and the preview colour picker */
.lz-mark{display:inline-flex;width:34px;height:34px}
.lz-mark svg{width:100%;height:100%;overflow:visible}
.brand .lz-on-dark{display:none}
.brand .lz-on-light{display:inline-flex}
html[data-hero="dark"] .nav:not(.solid) .brand .lz-on-dark{display:inline-flex}
html[data-hero="dark"] .nav:not(.solid) .brand .lz-on-light{display:none}
.brand-dark .lz-mark{display:inline-flex}
/* colour picker (preview only) */
.pal-pick{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100vw - 32px);padding:8px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.08);font:500 13px var(--sans);color:#222}
.pal-pick button{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px 0 5px;border-radius:99px;border:1px solid rgba(0,0,0,.1);background:#fff;cursor:pointer;font:inherit;color:inherit}
.pal-pick button i{width:24px;height:24px;border-radius:99px}
.pal-pick button b{font-weight:700}
.pal-pick button.on{border-color:#222;box-shadow:inset 0 0 0 1px #222}

/* accent-only sets: the original dark colours, a different accent */
html[data-accent] .btn-main:hover,html[data-accent] .dl-yours:hover{background:var(--iris-hover)}
html[data-accent] .aw-layouts div.sel{background:var(--iris-sel)}
html[data-accent] .comments li i,html[data-accent] .aw-bar b,html[data-accent] .aw-tray div.used::after,html[data-accent] .dl-yours,html[data-accent] .dl-yours small,html[data-accent] .dl-yours em{color:var(--on-iris)}

/* blended sets: the logo's amber and blue mixed on buttons and a few backgrounds */
html[data-grad]{--blend:linear-gradient(115deg,#EEC47F 0%,#EBD2A6 45%,#C3E1E3 82%,#B3DADE 100%)}
html[data-grad] .btn-main,html[data-grad] .dl-yours,html[data-grad] .aw-bar b{background:var(--blend);color:#0D0E12}
html[data-grad] .btn-main:hover,html[data-grad] .dl-yours:hover{background:var(--blend);filter:brightness(1.06)}
html[data-grad] .hero em{background:linear-gradient(90deg,#A9D6DA,#D3E5DC 50%,#EFD39C);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-grad] .dark{background:
  radial-gradient(75% 60% at 100% 0%,rgba(47,128,144,.13),transparent 78%),
  radial-gradient(65% 55% at 0% 100%,rgba(217,154,30,.08),transparent 78%),
  #0D0E12}
html[data-grad] .plan-feature{background:linear-gradient(150deg,#122A30 0%,#0D0E12 55%,#251E12 100%)}
html[data-grad] .aw-slider span,html[data-grad] .route-line span{background:var(--blend)}