/* 3D elements section. Layout, preview, controls and Apply come from the panel's own rules (copied onto the #o3-*
   elements at start-up); only what the standard pages do not have is styled here. Soft shadows only. */
#o3-main[hidden]{display:none!important}
/* The element list is icons only: no name, no plate behind the object (owner 27.10). */
#o3-presets{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px;align-content:start}
#o3-presets button{display:flex!important;align-items:center;justify-content:center;min-height:0!important;height:auto!important;aspect-ratio:1;padding:7px!important;margin:0!important}
#o3-presets button:after,#o3-presets button:before{content:none!important}
#o3-presets button .o3-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:none;margin:0!important}
#o3-presets button .o3-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.o3-harmonies{display:flex;flex-wrap:wrap;gap:8px}
.o3-main .o3-harmonies .o3-swatch{width:26px;height:26px;min-width:0;min-height:0;padding:0;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(28,60,106,.16);cursor:pointer;transition:transform .15s ease}/* The panel's own button states (hover, pressed) repaint buttons; a swatch always shows its two colours. */
.o3-main .o3-harmonies .o3-swatch,.o3-main .o3-harmonies .o3-swatch:active,.o3-main .o3-harmonies .o3-swatch:focus,.o3-main .o3-harmonies .o3-swatch[aria-pressed]{background:linear-gradient(135deg,var(--a) 0 55%,var(--b) 55% 100%)!important;color:transparent!important}@media (hover:hover) and (pointer:fine){.o3-main .o3-harmonies .o3-swatch:hover{background:linear-gradient(135deg,var(--a) 0 55%,var(--b) 55% 100%)!important;color:transparent!important}}
.o3-main .o3-harmonies .o3-swatch:before,.o3-main .o3-harmonies .o3-swatch:after{content:none!important}@media (hover:hover) and (pointer:fine){.o3-main .o3-harmonies .o3-swatch:hover{transform:scale(1.08)}}
.o3-main .o3-harmonies .o3-swatch[aria-pressed="true"]{outline:1.5px solid #14181d;outline-offset:2px}
html.dark-mode .o3-main .o3-harmonies .o3-swatch{border-color:#2a303b;box-shadow:none}
@media (max-width:620px){.content-column main>.preset-panel>#o3-presets{display:flex!important;grid-template-columns:none;overflow-x:auto;gap:6px}.content-column main>.preset-panel>#o3-presets button{flex:0 0 58px!important;width:58px!important;min-width:58px!important;max-width:58px!important;height:58px!important;padding:6px!important}}
/* Soft edges where the list and the controls scroll, like the category rail (no hard cut). */
.content-column main>.preset-panel>#o3-presets[data-orient="column"]{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14px,#000 calc(100% - 22px),transparent)!important;padding-top:10px!important;padding-bottom:18px!important}
.content-column main>.preset-panel>#o3-presets[data-orient="row"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 22px),transparent)!important}
#o3-main .workspace-scroll{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)}
/* The colour-set row is a div (a label would forward every click to its first swatch); it lays out like a field label. */
#o3-params .o3-field{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;margin:8px 0;align-items:center;font-size:11px;font-weight:450}