:root{
--bg:#111111;
--panel:#151515;
--panel2:#1a1a1a;
--panel3:#202020;
--edge:#303030;
--edge2:#424242;
--text:#919191;
--soft:#838383;
--muted:#666666;
--blue:#1768f0;
--blue2:#2f6fff;
--red:#e94b55;
--black:#090909;
--green:#2f6fff;
--shadow:0 18px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Montserrat,"Segoe UI",Arial,sans-serif}
button,input{font:inherit}
button{color:inherit}
.app-page{min-height:100vh;overflow:hidden}
.topbar{
height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
padding:10px 18px;border-bottom:1px solid #181818;background:#101010;
}
.brand{display:flex;align-items:center;min-width:0}
.brand-mark{
width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
margin-right:12px;border:2px solid #36404e;background:#1d2834;color:#5da0ff;
font-weight:800;letter-spacing:-1px;box-shadow:inset 0 0 0 2px #111;
}
.brand-copy{width:260px;min-width:0}
.brand-title{font-size:15px;font-weight:800;letter-spacing:.04em;color:#969696;white-space:nowrap}
.brand-rule{height:1px;width:150px;background:#858585;margin:7px 0 3px 2px}
.brand-subtitle{font-size:14px;font-style:italic;color:#6f6f6f}
.status-cluster{display:flex;align-items:center;gap:10px;justify-self:center}
.status-led,.mini-led{display:inline-block;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #333,0 0 10px rgba(233,75,85,.28)}
.status-led{width:28px;height:28px}
.mini-led{width:10px;height:10px;flex:none}
.status-led.ready,.mini-led.on{background:var(--blue2);box-shadow:0 0 0 2px #333,0 0 10px rgba(47,111,255,.45)}
.status-led.processing{background:#ff3b34}
.status-readout{
min-width:108px;text-align:center;border:1px solid #222;background:#080808;color:var(--blue2);
padding:6px 10px;font-family:Consolas,monospace;font-weight:700;letter-spacing:.04em
}
.top-nav{justify-self:end;display:flex;gap:8px}
.top-nav a,.text-button,.utility-button,.view-toggle{
border:1px solid #2a2a2a;background:transparent;color:#7f7f7f;text-decoration:none;
padding:7px 12px;font-size:11px;font-weight:800;cursor:pointer
}
.top-nav a:hover,.text-button:hover,.utility-button:hover,.view-toggle:hover{color:#aaa;border-color:#3c3c3c;background:#181818}
.utility-strip{
height:44px;display:flex;align-items:center;padding:0 18px;gap:8px;background:#111;border-bottom:1px solid #181818
}
.utility-divider,.utility-dash{color:#525252;margin:0 4px}
.utility-label{font-size:11px;font-weight:800;color:#777}
.view-toggle{padding:5px 9px;border:0}
.view-toggle.active{color:var(--blue2)}
.filename{margin-left:auto;color:#666;font-size:11px}
.neuro-image-layout{display:grid;grid-template-columns:330px 1fr;height:calc(100vh - 130px);min-height:540px}
.control-shell{
margin:0 0 0 14px;border:1px solid var(--edge);background:#111;overflow:hidden;min-width:0
}
.control-cap{
margin:10px;border:1px solid var(--edge);height:48px;display:flex;align-items:center;justify-content:center;
flex-direction:column;font-size:12px;font-weight:800;text-decoration:none;color:#818181;
position:relative;
}
.control-cap .control-title{font-size:12px;font-style:normal;font-weight:800;text-decoration:underline;color:#818181;margin-top:0}
.control-cap .control-subtitle{font-size:12px;font-style:italic;font-weight:400;text-decoration:none;color:#666;margin-top:2px}
/* CG-FX_DEFAULT visibility toggle -- top-right of the CONTROL PANEL
header, absolutely positioned so it never affects the header's
height or the title/subtitle's existing centered layout below it.
This is now the ONLY control for CG-FX_DEFAULT visibility (see
initDefaultImageQuickToggle() in public.js) -- the old DEFAULT IMAGE
drawer/breaker/path field/LOAD IMAGE/BROWSE PNG are gone. */
.default-image-icon-toggle{
position:absolute;
top:6px;
right:6px;
width:28px;
height:28px;
border:1px solid #444;
border-radius:50%;
background-color:#0d0d0d;
background-image: url("/app_images/icons/s.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
cursor:pointer;
padding:0;
opacity:.45;
}
.default-image-icon-toggle:hover{opacity:.75}
.default-image-icon-toggle.on{opacity:1;border-color:#174fae}
.default-image-icon-toggle.on:hover{opacity:1}
.control-scroll{height:calc(100% - 68px);overflow:auto;padding:8px 16px 20px;scrollbar-color:#333 #111;scrollbar-width:thin}
.drawer{border:2px solid #2e2e2e;background:#191919;margin:0 0 7px}
.drawer:nth-of-type(even){background:#202020}
.drawer-head{
width:100%;min-height:39px;border:0;background:transparent;display:flex;align-items:center;gap:7px;
padding:4px 7px;cursor:pointer;color:#858585
}
.drawer-head:hover{background:rgba(255,255,255,.015)}
.arrow{font-size:12px;width:13px}
.drawer-title{font-size:11px;font-weight:800;text-align:left}
.info-dot{
margin-left:auto;width:16px;height:16px;border:1px solid #444;border-radius:50%;display:inline-grid;place-items:center;
font-family:Georgia,serif;font-size:11px;color:#aaa;cursor:pointer
}
.breaker{
margin-left:6px;min-width:61px;border:1px solid #2d2d2d;background:#0d0d0d;color:#a44d4d;
padding:4px 7px;font-size:9px;font-weight:800;cursor:pointer
}
.breaker.on{color:var(--blue2);border-color:#174fae}
.drawer-body{display:none;border-top:1px solid #292929;padding:9px;background:rgba(0,0,0,.08)}
.drawer.open .drawer-body{display:block}
.drawer.open .arrow{color:var(--blue2)}
.family-rule{height:11px;border-top:1px solid #1254bb;margin:8px 6px 4px;opacity:.95}
.control-line{display:grid;grid-template-columns:100px 1fr;gap:8px;align-items:center;font-size:10px;font-weight:800;color:#747474}
.demo-slider{width:100%;accent-color:var(--blue)}
.wide-action{
display:block;text-align:center;border:1px solid #333;padding:7px;cursor:pointer;font-size:10px;font-weight:800;color:#858585
}
.wide-action:hover{background:#1d1d1d;color:#aaa}
.readout-row{display:flex;align-items:center;justify-content:space-between;margin-top:7px;gap:8px;font-size:10px;color:#777}
.readout-row output{background:#080808;border:1px solid #242424;color:var(--blue2);padding:4px 6px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.render-stage{min-width:0;display:flex;align-items:center;justify-content:center;padding:12px 18px 18px 12px;background:#111}
.render-frame{
position:relative;width:min(100%,1180px,calc((100vh - 161px) * 16 / 9));aspect-ratio:16/9;
border:1px solid #505050;background:#0b0b0b;overflow:hidden;box-shadow:var(--shadow)
}
.render-frame img{width:100%;height:100%;object-fit:contain;display:none;transform-origin:center}
.empty-state{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:7px;color:#5d5d5d}
.empty-state strong{letter-spacing:.16em;font-size:14px}
.empty-state span{font-size:11px}
.view-badge{
position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.72);border:1px solid #323232;color:#777;
padding:5px 8px;font-size:10px;font-weight:800
}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;z-index:100}
.modal-backdrop[hidden]{display:none}
.info-modal{width:min(520px,90vw);background:#101010;border:1px solid #383838;box-shadow:var(--shadow);padding:28px;position:relative}
.info-modal h2{margin:0 0 12px;font-size:15px;color:#9a9a9a}
.info-modal p{margin:0;color:#777;line-height:1.6;font-size:13px}
.modal-close{position:absolute;right:9px;top:7px;border:0;background:none;color:#777;font-size:24px;cursor:pointer}
.neurolab-strip{gap:28px}
.state-switch{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:#777}
.state-switch .breaker{margin-left:0}
.neurolab-layout{
display:grid;grid-template-columns:230px 1fr 230px;gap:10px;height:calc(100vh - 130px);
padding:0 14px 14px;background:#111;min-height:560px
}
.compact-shell{margin:0}
.panel-tools{padding:7px 13px;font-size:10px;font-weight:800;color:#6f6f6f;border-bottom:1px solid #222}
.panel-tools span{padding:0 6px;color:#4d4d4d}
.compact-shell .control-scroll{height:calc(100% - 94px);padding:8px 10px 20px}
.construction-shell{
position:relative;background:#101010;border:1px solid #303030;display:flex;align-items:flex-start;justify-content:center;overflow:hidden
}
.construction-zone{
width:100%;
aspect-ratio:16/9;
max-height:calc(100vh - 170px);
display:grid;
grid-template-columns:repeat(6,1fr);
grid-template-rows:repeat(6,1fr);
border:1px solid #1768f0;
background-color:#19392b;
background-image:
linear-gradient(rgba(120,160,135,.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(120,160,135,.10) 1px, transparent 1px);
background-size:24px 24px;
box-shadow:
inset 0 0 35px rgba(0,0,0,.35),
0 0 4px rgba(23,104,240,.35);
}
.grid-cell{
appearance:none;
-webkit-appearance:none;
background:transparent;
border:0;
border-right:1px solid rgba(125,155,135,.28);
border-bottom:1px solid rgba(125,155,135,.28);
cursor:pointer;
position:relative;
}
.grid-cell:hover{background:rgba(47,111,255,.06)}
.grid-cell.selected{outline:1px solid var(--blue2);outline-offset:-2px;background:rgba(47,111,255,.08)}
.grid-cell.layer::after{content:"";position:absolute;inset:18%;border:1px solid #6f6f6f;background:rgba(90,90,90,.12)}
.construction-caption{position:absolute;left:10px;bottom:8px;font-size:9px;color:#4f4f4f;letter-spacing:.08em}
.action-row{display:flex;gap:4px;flex-wrap:wrap}
.action-row button{border:1px solid #303030;background:#151515;color:#777;padding:5px 7px;font-size:9px;font-weight:800;cursor:pointer}
.action-row button:hover{color:#aaa;background:#1d1d1d}
@media (max-width:980px){
.app-page{overflow:auto}
.topbar{grid-template-columns:1fr auto;height:auto;gap:10px}
.status-cluster{grid-column:2;grid-row:1}
.top-nav{grid-column:1/-1;justify-self:start}
.neuro-image-layout{grid-template-columns:270px 1fr;height:auto;min-height:760px}
.neurolab-layout{grid-template-columns:210px 1fr;grid-template-rows:auto auto;height:auto}
.neurolab-layout>aside:last-child{grid-column:1/-1;min-height:380px}
}
@media (max-width:720px){
.topbar{display:flex;flex-wrap:wrap}
.status-cluster{margin-left:auto}
.top-nav{width:100%}
.neuro-image-layout{grid-template-columns:1fr;height:auto}
.control-shell{margin:0 14px;min-height:430px}
.render-stage{min-height:520px;padding:14px}
.neurolab-layout{display:block}
.neurolab-layout>*{margin-bottom:12px;min-height:430px}
}
/* ==========================================================
CG-6 WEB APP ASSETS
Paths below are relative to css/style.css.
========================================================== */
.brand-mark {
border:0;
background:transparent;
box-shadow:none;
padding:0;
overflow:hidden;
}
.brand-mark img {
width:58px;
height:58px;
object-fit:contain;
display:block;
}
.status-led {
width:56px;
height:56px;
flex:none;
border:0;
border-radius:50%;
background-color:transparent;
background-image:url("../app_images/knobs/ready_LED.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
box-shadow:none;
}
.status-led.ready {
background-image:url("../app_images/knobs/ready_LED.png");
}
.status-led.processing {
background-image:url("../app_images/knobs/processing_LED.png");
}
.status-led.rendered {
background-image:url("../app_images/knobs/rendered_LED.png");
}
.mini-led {
width:18px;
height:18px;
background-color:transparent;
background-image:url("../app_images/knobs/processing_LED.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
box-shadow:none;
}
.mini-led.on {
background-image:url("../app_images/knobs/ready_LED.png");
background-color:transparent;
box-shadow:none;
}
.info-dot {
width:18px;
height:18px;
border:0;
border-radius:0;
color:transparent;
font-size:0;
background-color:transparent;
background-image:url("../app_images/icons/info.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.breaker {
width:78px;
height:31px;
min-width:78px;
border:0;
padding:0;
color:transparent;
font-size:0;
background-color:transparent;
background-image:url("../app_images/breaker/breaker_off.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.breaker.on {
border:0;
color:transparent;
background-image:url("../app_images/breaker/breaker_on.png");
}
.breaker span {
display:none;
}
.demo-slider {
-webkit-appearance:none;
appearance:none;
height:32px;
background-color:transparent;
background-image:url("../app_images/slot/slot.png");
background-repeat:no-repeat;
background-position:center;
background-size:100% 13px;
outline:none;
}
.demo-slider::-webkit-slider-runnable-track {
height:32px;
background:transparent;
border:0;
}
.demo-slider::-webkit-slider-thumb {
-webkit-appearance:none;
appearance:none;
width:30px;
height:30px;
margin-top:1px;
border:0;
border-radius:0;
background-color:transparent;
background-image:url("../app_images/knobs/knob_normal.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
cursor:pointer;
}
.demo-slider::-webkit-slider-thumb:hover,
.demo-slider:active::-webkit-slider-thumb {
background-image:url("../app_images/knobs/knob_highlight.png");
}
.demo-slider::-moz-range-track {
height:32px;
background:transparent;
border:0;
}
.demo-slider::-moz-range-thumb {
width:30px;
height:30px;
border:0;
border-radius:0;
background-color:transparent;
background-image:url("../app_images/knobs/knob_normal.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
cursor:pointer;
}
.demo-slider::-moz-range-thumb:hover {
background-image:url("../app_images/knobs/knob_highlight.png");
}
/* ==========================================================
SLIDER RANGE CALIBRATION — HI/LO authority controls, added
directly beneath every .demo-slider by the calibration
module in public.js. Built as a recessed instrument plate
to match the panel's own hardware (breakers, LEDs, digital
readouts) rather than a web form. Cosmetic + storage only
in this phase: does not alter slider behavior or engine
calculations.
========================================================== */
.cg-calib-row{
margin:2px 0 6px;
padding-top:6px;
border-top:1px solid #1c1c1c;
}
.cg-calib-plate{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:6px;
padding:6px;
background:linear-gradient(180deg,#0c0c0c,#070707);
border:1px solid #303030;
border-radius:2px;
box-shadow:
inset 0 1px 2px rgba(0,0,0,.75),
inset 0 0 0 1px #1a1a1a;
}
.cg-calib-bookend{
flex:0 0 auto;
font-family:Montserrat,"Segoe UI",Arial,sans-serif;
font-size:14px;
font-weight:800;
line-height:1;
color:#747474;
}
/* Digital readout bins -- the exact same computed rule set the panel
actually renders for .category-primary-readout (the RELATIVITY
0%-style window), i.e. its final "DIGITAL BIN HARDWARE
SPECIFICATION" cascade further down this file, not the earlier
superseded font-size:16px rule this block was previously copied
from. Width stays 108px (unchanged dimension, fixed last round so
1,000,000 never needs to resize the bin) -- every other property
below matches that hardware spec property-for-property. */
.cg-calib-value{
flex:0 0 auto;
width:108px;
box-sizing:border-box;
display:block;
padding:0 8px;
text-align:right;
background:#080808;
border:1px solid #242424;
color:#2f6fff;
font-family:Consolas,monospace;
font-size:12px;
font-weight:700;
letter-spacing:.04em;
line-height:22px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
cursor:text;
user-select:text;
}
.cg-calib-value:focus{
outline:none;
border-color:#2f6fff;
box-shadow:0 0 6px rgba(47,111,255,.4);
}
.cg-calib-track{
flex:0 1 44px;
min-width:20px;
text-align:center;
overflow:hidden;
font-family:Consolas,monospace;
font-size:11px;
font-weight:800;
letter-spacing:-.05em;
color:#747474;
white-space:nowrap;
}
/* SAVE -- the exact same rule set as .mask-reset-category, the
panel's standard hardware button (RESET CATEGORY, LOAD MASK, etc). */
/* SAVE -- the exact same base rule set as .mask-reset-category (the
panel's standard hardware button), sharing its typography via the
single canonical "BUTTON LABEL" rule below rather than a local
font-size/weight override. */
.cg-calib-save{
width:100%;
min-height:31px;
border:1px solid #303030;
background:transparent;
color:#747474;
cursor:pointer;
margin-top:4px;
}
.cg-calib-save:hover{color:#aaa;border-color:#3a3a3a}
.cg-calib-save.cg-calib-saved{color:#2f6fff;border-color:#2f6fff}
/* ==========================================================
NEURO-IMAGE — SERVER IMAGE BROWSER
One thumbnail at a time, five-position discrete slider.
========================================================== */
.image-browser{
display:flex;
flex-direction:column;
gap:8px;
}
.image-thumb-frame{
width:100%;
aspect-ratio:16/9;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:#090909;
border:1px solid #343434;
box-shadow:inset 0 0 18px rgba(0,0,0,.45);
}
.image-thumb-frame img{
display:none;
width:100%;
height:100%;
object-fit:contain;
}
.image-browser-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
font-size:9px;
font-weight:800;
letter-spacing:.05em;
color:#6f6f6f;
}
.image-browser-meta output{
min-width:38px;
text-align:right;
color:#2f6fff;
font-family:Consolas,monospace;
}
.server-image-slider{
width:100%;
accent-color:#1768f0;
cursor:pointer;
}
.load-server-image{
width:100%;
border:1px solid #343434;
background:#141414;
color:#898989;
}
.load-server-image:hover,
.load-server-image:focus-visible,
.load-server-image:active{
border-color:var(--blue2);
background:#171717;
color:var(--blue2);
outline:none;
}
/* IMAGE preview — compact thumbnail */
.image-thumb-frame{
width:128px;
height:72px;
aspect-ratio:auto;
margin:0 auto;
flex:0 0 auto;
}
.image-thumb-frame img{
width:100%;
height:100%;
object-fit:cover;
}
/* IMAGE SELECT — match the standard CG-6 hardware sliders */
.server-image-slider{
-webkit-appearance:none;
appearance:none;
width:100%;
height:32px;
padding:0;
background-color:transparent;
background-image:url("../app_images/slot/slot.png");
background-repeat:no-repeat;
background-position:center;
background-size:100% 13px;
outline:none;
cursor:pointer;
accent-color:transparent;
}
.server-image-slider::-webkit-slider-runnable-track{
height:32px;
background:transparent;
border:0;
}
.server-image-slider::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:30px;
height:30px;
margin-top:1px;
border:0;
border-radius:0;
background-color:transparent;
background-image:url("../app_images/knobs/knob_normal.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
cursor:pointer;
}
.server-image-slider::-webkit-slider-thumb:hover,
.server-image-slider:active::-webkit-slider-thumb{
background-image:url("../app_images/knobs/knob_highlight.png");
}
.server-image-slider::-moz-range-track{
height:32px;
background:transparent;
border:0;
}
.server-image-slider::-moz-range-thumb{
width:30px;
height:30px;
border:0;
border-radius:0;
background-color:transparent;
background-image:url("../app_images/knobs/knob_normal.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
cursor:pointer;
}
.server-image-slider::-moz-range-thumb:hover{
background-image:url("../app_images/knobs/knob_highlight.png");
}
/* ==========================================================
CG-6 FUNCTION PASS — viewport + longer hardware sliders
========================================================== */
/* Increase the usable slider run by more than 20% on desktop. */
.neuro-image-layout{grid-template-columns:390px 1fr}
.control-line{grid-template-columns:78px minmax(0,1fr);gap:8px}
.demo-slider{min-width:0;width:100%}
/* Canvas render viewport replaces the visible ![]()
; the hidden image remains
only as the source bitmap for Canvas processing and SAVE. */
.render-frame{touch-action:none;user-select:none}
.render-frame img#demoImage{display:none !important}
#renderCanvas{
position:absolute;
inset:0;
display:none;
width:100%;
height:100%;
cursor:default;
}
.render-frame.panning #renderCanvas{cursor:grabbing}
/* BEFORE / AFTER divider: BEFORE is left, AFTER is right. */
.compare-divider{
position:absolute;
top:0;
bottom:0;
left:50%;
width:3px;
display:none;
background:#8a8a8a;
box-shadow:0 0 0 1px rgba(0,0,0,.55);
cursor:ew-resize;
z-index:4;
transform:translateX(-1px);
outline:none;
touch-action:none;
}
.compare-divider::before{
content:"BEFORE";
position:absolute;
top:8px;
right:10px;
color:#8a8a8a;
background:rgba(0,0,0,.62);
border:1px solid #303030;
padding:3px 5px;
font-size:9px;
font-weight:800;
letter-spacing:.05em;
pointer-events:none;
}
.compare-divider::after{
content:"AFTER";
position:absolute;
top:8px;
left:10px;
color:#8a8a8a;
background:rgba(0,0,0,.62);
border:1px solid #303030;
padding:3px 5px;
font-size:9px;
font-weight:800;
letter-spacing:.05em;
pointer-events:none;
}
.compare-handle{
position:absolute;
left:50%;
top:50%;
width:25px;
height:25px;
transform:translate(-50%,-50%);
border:1px solid #555;
border-radius:50%;
background:#111;
box-shadow:inset 0 0 0 4px #1f1f1f;
pointer-events:none;
}
.compare-divider:focus-visible .compare-handle{outline:1px solid var(--blue2);outline-offset:2px}
@media (max-width:1100px){
.neuro-image-layout{grid-template-columns:330px 1fr}
.control-line{grid-template-columns:74px minmax(0,1fr)}
}
/* ==========================================================
CG-6 SLIDER + BEFORE/AFTER PASS
========================================================== */
/* Longer control hardware without changing the drawer hierarchy.
The panel gains room and the label column gives more of each row to the slot. */
@media (min-width:1101px){
.neuro-image-layout{grid-template-columns:440px minmax(0,1fr)}
.control-line{grid-template-columns:58px minmax(0,1fr);gap:8px}
.control-scroll{padding-left:14px;padding-right:14px}
}
/* The range itself always consumes the complete hardware column. */
.demo-slider{
display:block;
width:100%;
min-width:0;
}
/* BEFORE / AFTER vertical comparison control inside the Render Window.
A wide transparent hit-zone makes it easy to grab while the visible rule
remains narrow and technical. */
.compare-divider{
top:0;
bottom:0;
width:34px;
margin-left:-17px;
background:transparent;
box-shadow:none;
transform:none;
cursor:ew-resize;
z-index:8;
}
.compare-divider::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:16px;
right:auto;
width:2px;
padding:0;
border:0;
background:#a0a0a0;
box-shadow:0 0 0 1px rgba(0,0,0,.72);
pointer-events:none;
}
.compare-divider::after{
content:"";
display:none;
}
.compare-handle{
left:17px;
top:50%;
width:34px;
height:54px;
border-radius:3px;
border:1px solid #555;
background:#0c0c0c;
box-shadow:inset 0 0 0 1px #242424,0 0 0 1px rgba(0,0,0,.6);
}
.compare-handle::before,
.compare-handle::after{
position:absolute;
left:50%;
transform:translateX(-50%);
color:#8d8d8d;
font-size:8px;
line-height:1;
font-weight:800;
letter-spacing:.04em;
white-space:nowrap;
}
.compare-handle::before{content:"BEFORE";top:10px}
.compare-handle::after{content:"AFTER";bottom:10px}
.compare-divider:hover .compare-handle,
.compare-divider:focus-visible .compare-handle{
border-color:#707070;
}
/* ==========================================================
CG-6 BEFORE / AFTER — THIN LINE + BLUE DOT
Reference: native desktop comparison divider.
Keeps a wide invisible hit area for easy dragging while showing only
the narrow vertical rule and compact blue circular grab point.
========================================================== */
.compare-divider{
top:0;
bottom:0;
width:28px;
margin-left:-14px;
background:transparent;
box-shadow:none;
transform:none;
cursor:ew-resize;
z-index:8;
}
.compare-divider::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:13px;
width:1px;
padding:0;
border:0;
background:#707070;
box-shadow:none;
pointer-events:none;
}
.compare-divider::after{
content:"";
display:none;
}
.compare-handle{
position:absolute;
left:13.5px;
top:50%;
width:11px;
height:11px;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid #1768F0;
background:#003F91;
box-shadow:0 0 0 1px rgba(0,0,0,.55);
pointer-events:none;
}
.compare-handle::before,
.compare-handle::after{
content:"";
display:none;
}
.compare-divider:hover .compare-handle,
.compare-divider:focus-visible .compare-handle{
border-color:#2F6FFF;
background:#1556C8;
}
.compare-divider:focus-visible .compare-handle{
outline:1px solid #2F6FFF;
outline-offset:2px;
}
/* ==========================================================
CG-6 MASK WORKSHOP — restored native layout
========================================================== */
.mask-workshop{padding:8px}
.mask-station{
display:grid;
grid-template-columns:192px minmax(0,1fr);
gap:10px;
align-items:start;
border:1px solid #303030;
padding:8px;
margin-bottom:6px;
}
.mask-preview-column{min-width:0}
.mask-preview-frame{
width:192px;
height:108px;
position:relative;
overflow:hidden;
background:#050505;
border:1px solid #2a2a2a;
box-shadow:inset 0 0 16px rgba(0,0,0,.55);
}
#maskPreviewCanvas{
display:block;
width:192px;
height:108px;
background:#000;
}
.mask-preview-badge{
position:absolute;
right:6px;
bottom:5px;
font-size:11px;
font-weight:900;
color:#2f6fff;
pointer-events:none;
}
.mask-preview-name{
padding:5px 2px 0;
color:#666;
font-size:9px;
font-style:italic;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.mask-action-list{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:0;
padding-top:2px;
}
.mask-action-list button{
appearance:none;
border:0;
background:transparent;
color:#777;
padding:2px 2px;
min-height:0;
line-height:1.25;
font-size:11px;
font-weight:800;
text-align:left;
cursor:pointer;
}
.mask-action-list button:hover,
.mask-action-list button.active{color:#a0a0a0}
.mask-action-list button.active{color:#2f6fff}
.mask-target-row,
.mask-color-row,
.mask-function-block{
border:1px solid #303030;
background:rgba(0,0,0,.06);
}
.mask-target-row{
min-height:29px;
display:grid;
grid-template-columns:58px minmax(0,1fr);
align-items:center;
gap:8px;
padding:3px 6px;
margin-bottom:6px;
color:#666;
font-size:9px;
font-weight:800;
}
.mask-target-row output{
display:block;
min-width:0;
border:1px solid #252525;
background:#080808;
color:#2f6fff;
padding:3px 6px;
text-align:center;
font-family:Consolas,monospace;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.mask-target-row.compact{
margin:2px 0 0;
border:0;
border-top:1px solid #292929;
padding:4px 0 0;
background:transparent;
}
.mask-color-row{
min-height:31px;
display:flex;
align-items:center;
gap:14px;
padding:4px 8px;
margin-bottom:6px;
color:#777;
font-size:9px;
font-weight:800;
}
.mask-color-row>span{margin-right:auto}
.mask-color-row button{
border:0;
background:transparent;
color:#747474;
padding:2px 3px;
font-size:9px;
font-weight:800;
cursor:pointer;
}
.mask-color-row button:hover{color:#aaa}
.mask-color-row button.active{color:#2f6fff}
.mask-function-block{
padding:6px 7px 5px;
margin-bottom:6px;
}
.mask-function-head{
min-height:20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
color:#777;
font-size:9px;
font-weight:800;
}
.mask-function-head output{
min-width:50px;
padding:2px 5px;
text-align:right;
background:#080808;
border:1px solid #242424;
color:#2f6fff;
font-family:Consolas,monospace;
}
.mask-function-block .demo-slider{width:100%}
@media (max-width:1100px){
.mask-station{grid-template-columns:192px minmax(0,1fr)}
.mask-preview-frame{width:192px;height:108px}
#maskPreviewCanvas{width:192px;height:108px}
}
/* ==========================================================
MASK INTERNAL INDEX — restored CG-6 reference layout
========================================================== */
.mask-workshop{
padding:8px;
}
.mask-station{
grid-template-columns:192px minmax(0,1fr);
gap:10px;
margin-bottom:6px;
}
.mask-action-list{
justify-content:flex-start;
padding-top:2px;
}
.mask-paint-row{
grid-template-columns:62px minmax(0,1fr);
}
.mask-function-drawer{
border:1px solid #303030;
background:rgba(0,0,0,.06);
margin-bottom:5px;
}
.mask-function-toggle{
width:100%;
min-height:28px;
display:flex;
align-items:center;
gap:7px;
border:0;
background:transparent;
color:#777;
padding:4px 8px;
font-size:9px;
font-weight:800;
text-align:left;
cursor:pointer;
}
.mask-function-toggle:hover{color:#aaa}
.mask-function-arrow{
width:9px;
color:#777;
font-size:8px;
flex:0 0 9px;
}
.mask-function-drawer.open{
border-color:#3a3a3a;
}
.mask-function-drawer.open .mask-function-toggle{
color:#888;
border-bottom:1px solid #292929;
}
.mask-function-body{
padding:6px 7px 6px;
}
.mask-function-body[hidden]{display:none !important}
.mask-reset-category{
width:100%;
min-height:31px;
border:1px solid #303030;
background:transparent;
color:#747474;
font-size:9px;
font-weight:800;
cursor:pointer;
margin-top:1px;
}
.mask-reset-category:hover{color:#aaa;border-color:#3a3a3a}
/* ==========================================================
MASK SERVER LIBRARY — cg-6.com/app_images/mask/test_0001..0005
========================================================== */
.mask-action-list{position:relative}
.server-mask-menu{
position:absolute;
left:-2px;
top:27px;
z-index:30;
width:116px;
padding:4px;
border:1px solid #343434;
background:#101010;
box-shadow:0 5px 18px rgba(0,0,0,.55);
}
.server-mask-menu[hidden]{display:none !important}
.mask-action-list .server-mask-menu button{
display:block;
width:100%;
padding:4px 6px;
color:#858585;
background:#101010;
border:0;
font-size:10px;
line-height:1.15;
text-align:left;
white-space:nowrap;
}
.mask-action-list .server-mask-menu button:hover,
.mask-action-list .server-mask-menu button:focus-visible{
color:#2f6fff;
background:#171717;
outline:none;
}
/* ==========================================================
MASK FLIP-BOOK — server folders test_0001..test_0005
========================================================== */
.server-mask-browser{
border:1px solid #303030;
background:#121212;
padding:7px;
margin:0 0 6px;
}
.server-mask-browser[hidden]{display:none !important}
.server-mask-browser-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
color:#818181;
font-size:9px;
font-weight:800;
margin-bottom:6px;
}
.server-mask-browser-head button{
appearance:none;
width:22px;
height:20px;
border:1px solid #303030;
background:#0b0b0b;
color:#777;
cursor:pointer;
line-height:1;
}
.server-mask-browser-head button:hover{color:#2f6fff;border-color:#3b3b3b}
.server-mask-thumb-frame{
height:138px;
border:1px solid #2c2c2c;
background:#050505;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
margin-bottom:6px;
}
.server-mask-thumb-frame img{
display:block;
max-width:100%;
max-height:100%;
object-fit:contain;
image-rendering:auto;
}
.server-mask-slider{width:100%;margin:2px 0 5px}
.mask-file-meta{margin-top:3px}
.server-mask-selection-readout{
display:grid;
grid-template-columns:88px minmax(0,1fr);
gap:7px;
align-items:center;
margin:2px 0 7px;
}
.server-mask-selection-readout output{
min-width:0;
border:1px solid #292929;
background:#080808;
color:#2f6fff;
font-family:Consolas,monospace;
font-size:9px;
padding:3px 5px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
CG-6 LOCAL FILE WORKFLOW — IMAGE + MASK
Browser file picker is the working source; server flip-books are retired.
========================================================== */
.local-file-browser{
display:flex;
flex-direction:column;
gap:7px;
}
.local-file-readout{
margin-top:0;
}
.local-file-readout output{
flex:1;
max-width:none;
text-align:right;
}
.local-image-preview-frame{
margin-top:2px;
}
.mask-file-readouts{
display:flex;
flex-direction:column;
gap:5px;
margin:0 0 6px;
padding:6px;
border:1px solid #303030;
background:rgba(0,0,0,.06);
}
.mask-file-readouts .readout-row{
margin-top:0;
}
.mask-file-readouts output{
flex:1;
max-width:none;
text-align:right;
}
/* ==========================================================
IMAGE LOCAL PICKER — preview first + CG-6 button highlight
========================================================== */
.local-image-preview-frame{
margin-top:0;
margin-bottom:2px;
}
.local-image-load{
width:100%;
min-height:31px;
border:1px solid #303030;
background:transparent;
color:#747474;
font-size:9px;
font-weight:800;
cursor:pointer;
margin-top:1px;
}
.local-image-load:hover,
.local-image-load:focus-visible,
.local-image-load:active{
color:#aaa;
border-color:#3a3a3a;
background:transparent;
outline:none;
}
/* IMAGE PATH / FILE — use the same charcoal bin treatment as MASK. */
.image-file-readouts{
margin:0;
}
/* ==========================================================
MASK — PREVIEW MATCHES SIX-ITEM TOOL LIST
LOAD / SAVE sit directly below preview.
========================================================== */
.mask-preview-column{
width:192px;
}
.mask-preview-name{
width:192px;
}
.mask-preview-action{
width:100%;
min-height:24px;
margin-top:4px;
border:1px solid #303030;
background:transparent;
color:#747474;
font-size:9px;
font-weight:800;
cursor:pointer;
}
.mask-preview-action:hover,
.mask-preview-action:focus-visible,
.mask-preview-action:active{
color:#aaa;
border-color:#3a3a3a;
background:transparent;
outline:none;
}
/* ==========================================================
MASK LIST RESTORE — KEEP TOOL LIST BESIDE 16:9 PREVIEW
========================================================== */
.mask-station{
display:grid !important;
grid-template-columns:192px minmax(0,1fr) !important;
align-items:start;
}
.mask-action-list{
display:flex !important;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
visibility:visible !important;
opacity:1 !important;
min-width:0;
}
.mask-preview-frame{
width:192px !important;
height:108px !important;
}
#maskPreviewCanvas{
width:192px !important;
height:108px !important;
}
.mask-preview-action{
width:100%;
min-height:31px;
border:1px solid #303030;
background:transparent;
color:#747474;
font-size:9px;
font-weight:800;
cursor:pointer;
margin-top:1px;
}
.mask-preview-action:hover,
.mask-preview-action:focus-visible,
.mask-preview-action:active{
color:#aaa;
border-color:#3a3a3a;
background:transparent;
outline:none;
}
/* ==========================================================
CG-6 NEURO-IMAGE — EFFECT HARDWARE LAYOUT
COLOR / LIGHT / TEXTURE are section dividers; actual engines
are direct hardware rows with local ON/OFF breakers.
========================================================== */
.effect-family-section{
margin:9px 0 0;
}
.effect-family-heading{
display:flex;
align-items:center;
gap:10px;
min-height:24px;
padding:0 5px;
color:#777;
font-size:9px;
font-weight:800;
letter-spacing:.10em;
border-top:1px solid #1768f0;
}
.effect-family-heading::after{
content:"";
height:1px;
flex:1;
background:#1768f0;
opacity:.72;
}
.effect-family-section .family-subcategory-list{
display:block !important;
padding:0;
border:0;
background:transparent;
}
.effect-family-section .family-subcategory{
margin:0 0 6px;
}
.family-subcategory-toggle{
min-height:39px;
}
.family-subcategory-toggle .mini-led{
margin-left:1px;
flex:0 0 auto;
}
.family-subcategory-toggle .breaker{
margin-left:auto !important;
flex:0 0 auto;
}
/* ==========================================================
CG-6 STATUS GEOMETRY LOCK
Keep READY / PROCESSING / RENDERED hardware fixed in place.
All LED states use the larger READY footprint.
========================================================== */
.status-cluster{
width:174px;
min-width:174px;
max-width:174px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
}
.status-led,
.status-led.ready,
.status-led.processing,
.status-led.rendered{
width:56px !important;
height:56px !important;
min-width:56px !important;
min-height:56px !important;
max-width:56px !important;
max-height:56px !important;
flex:0 0 56px !important;
background-size:56px 56px !important;
background-position:center !important;
background-repeat:no-repeat !important;
}
.status-readout{
width:108px;
min-width:108px;
max-width:108px;
flex:0 0 108px;
white-space:nowrap;
overflow:hidden;
}
/* ==========================================================
CG-6 EFFECT MINI LED — use the actual CG-6 theme artwork
OFF = processing_LED.png (red)
ON = ready_LED.png (blue)
Assets are under app_images/knobs/knobs/.
========================================================== */
.family-subcategory-toggle .mini-led,
.drawer-head .mini-led {
display:inline-block !important;
visibility:visible !important;
opacity:1 !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
min-height:18px !important;
flex:0 0 18px !important;
margin-left:1px;
border:0 !important;
border-radius:50% !important;
background-color:transparent !important;
background-image:url("../app_images/knobs/knobs/processing_LED.png") !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:contain !important;
box-shadow:none !important;
}
.family-subcategory-toggle .mini-led.on,
.drawer-head .mini-led.on {
background-image:url("../app_images/knobs/knobs/ready_LED.png") !important;
background-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
CG-6 LED FINISH PASS
1) Match visible outer halo on PROCESSING / RENDERED status LEDs.
2) Keep the actual theme ON/OFF mini LED visible between the
dropdown arrow and the effect category label.
========================================================== */
.status-led.processing{
filter:
drop-shadow(0 0 3px rgba(255,59,120,.95))
drop-shadow(0 0 8px rgba(255,59,120,.58));
}
.status-led.rendered{
filter:
drop-shadow(0 0 3px rgba(255,154,0,.95))
drop-shadow(0 0 8px rgba(255,154,0,.58));
}
.family-subcategory-toggle{
display:flex !important;
align-items:center !important;
}
/* CG-6 BREAKER + INFO COLUMN UNIFICATION
One shared grid structure for every top-level category row
(.drawer-head: ROOT/IMAGE/AUTO_MASK/MASK/OPTIONS) and every
subcategory row (.family-subcategory-toggle: RED--BLUE through
E=MC3 LIBRARY) -- previously these were two separate layout systems
(flex+auto-margin for .drawer-head, grid for .family-subcategory-toggle
from an earlier pass) that could drift apart. Now both use the exact
same column template, so BREAKER and INFO always land in the same
pixel column regardless of which row type or how long the label is.
Columns: [LED][arrow][label, flexible][BREAKER][INFO].
Rows without a breaker (IMAGE/AUTO_MASK/MASK/OPTIONS) still place
INFO in the same final column via an explicit grid-column, not by
relying on however many items happen to precede it. */
body[data-app="neuro-image"] .drawer-head,
body[data-app="neuro-image"] .family-subcategory-toggle{
display:grid !important;
grid-template-columns:auto auto minmax(0,1fr) auto auto !important;
}
body[data-app="neuro-image"] .drawer-head > span:not([class]),
body[data-app="neuro-image"] .drawer-head > .drawer-title,
body[data-app="neuro-image"] .family-subcategory-toggle > span:not([class]){
min-width:0 !important;
}
/* Inner slider-row labels (WEIGHT, STEPS, DISTANCE INFLUENCE, CURVATURE
INFLUENCE, and E=MC3 BANK's MASTER/CURVATURE/etc titles) never got the
same min-width:0 allowance .family-subcategory-toggle's own label
already has above. Single-word labels never needed it, but a label
that wraps to two lines (DISTANCE INFLUENCE, CURVATURE INFLUENCE)
couldn't shrink properly, throwing off that row's vertical centering
of its breaker/info icons relative to every single-line row above and
below it. Only affects rows whose label actually wraps -- no visual
change for any row that already fits on one line. */
body[data-app="neuro-image"] .mask-function-toggle:not(.family-subcategory-toggle) > span:not([class]){
min-width:0 !important;
}
body[data-app="neuro-image"] .drawer-head > .info-dot,
body[data-app="neuro-image"] .family-subcategory-toggle > .info-dot{
grid-column:5 !important;
margin-left:0 !important;
}
/* .info-dot's base margin-left:auto (declared far above) is only ever
reset for the grid-based header rows immediately above -- never for
the three flex-based inner-row toggle classes below (.category-fx-toggle,
.mask-effect-toggle, .emc3-var-toggle). In those rows, BOTH the
breaker and .info-dot carry an unopposed auto left-margin, so flex
splits the row's leftover space between the two of them -- and how
much leftover space there is depends entirely on how long that row's
label is. That's why WEIGHT (short label, lots of leftover space)
lands its breaker/info at a different X position than EDGE COMPLEXITY
or a wrapped two-line label (little to none) -- and the same gap
affects E=MC3 BANK's MASTER/CURVATURE/etc rows for the identical
reason, since .emc3-var-toggle never had this selector included.
Zeroing info-dot's margin here leaves the breaker's own auto margin
as the only one claiming free space: it sits flush right, at the
same fixed X on every row regardless of label length, exactly like
the header rows already do -- and info-dot sits a constant `gap`
after it. */
body[data-app="neuro-image"] .category-fx-toggle > .info-dot,
body[data-app="neuro-image"] .mask-effect-toggle > .info-dot,
body[data-app="neuro-image"] .emc3-var-toggle > .info-dot{
margin-left:0 !important;
}
.family-subcategory-toggle > .mini-led{
display:inline-block !important;
visibility:visible !important;
opacity:1 !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
min-height:18px !important;
flex:0 0 18px !important;
margin:0 6px 0 4px !important;
background-image:url("../app_images/knobs/knobs/processing_LED.png") !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:18px 18px !important;
}
.family-subcategory-toggle > .mini-led.on{
background-image:url("../app_images/knobs/knobs/ready_LED.png") !important;
}
/* ==========================================================
CG-6 CATEGORY THEME LED PATH FIX
Use the same server asset path already used by the large
READY / PROCESSING LEDs. This applies to both top-level
category rows and the COLOR/LIGHT/TEXTURE effect rows.
========================================================== */
.drawer-head > .mini-led,
.family-subcategory-toggle > .mini-led{
display:inline-block !important;
visibility:visible !important;
opacity:1 !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
min-height:18px !important;
flex:0 0 18px !important;
margin:0 6px 0 4px !important;
border:0 !important;
border-radius:50% !important;
background-color:transparent !important;
background-image:url("../app_images/knobs/processing_LED.png") !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:18px 18px !important;
box-shadow:none !important;
}
.drawer-head > .mini-led.on,
.family-subcategory-toggle > .mini-led.on{
background-image:url("../app_images/knobs/ready_LED.png") !important;
}
/* ==========================================================
CG-6 VISUAL POLISH PASS
- Reduce PROCESSING / RENDERED outer halo to match READY.
- Enlarge category/effect round ON/OFF LEDs.
- Replace COLOR / LIGHT / TEXTURE text headings with
tapered blue separators like the LOOMNZ reference.
========================================================== */
/* Subtle halo: retain the theme artwork glow without the oversized bloom. */
.status-led.processing{
filter:drop-shadow(0 0 4px rgba(255,59,120,.30)) !important;
}
.status-led.rendered{
filter:drop-shadow(0 0 4px rgba(255,154,0,.30)) !important;
}
/* Larger hardware state LEDs on ROOT/effect rows. */
.drawer-head > .mini-led,
.family-subcategory-toggle > .mini-led{
width:24px !important;
height:24px !important;
min-width:24px !important;
min-height:24px !important;
max-width:24px !important;
max-height:24px !important;
flex:0 0 24px !important;
margin:0 7px 0 4px !important;
background-size:24px 24px !important;
}
/* Tapered blue group separators — no COLOR/LIGHT/TEXTURE text label. */
.effect-family-heading{
position:relative !important;
display:block !important;
min-height:12px !important;
height:12px !important;
padding:0 !important;
margin:2px 6px 7px !important;
border:0 !important;
font-size:0 !important;
line-height:0 !important;
overflow:hidden !important;
}
.effect-family-heading > span{
display:none !important;
}
.effect-family-heading::before{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:5px !important;
height:1px !important;
background:linear-gradient(
90deg,
rgba(23,104,240,0) 0%,
rgba(23,104,240,.28) 8%,
rgba(47,111,255,.95) 28%,
rgba(47,111,255,1) 50%,
rgba(47,111,255,.95) 72%,
rgba(23,104,240,.28) 92%,
rgba(23,104,240,0) 100%
) !important;
box-shadow:0 0 5px rgba(47,111,255,.22) !important;
}
.effect-family-heading::after{
display:none !important;
}
/* COLOR ONLY: reverse the decorative-line-only treatment above so COLOR
becomes a real, visible, collapsible parent row -- one clickable heading
that shows/hides its three existing child rows (RED — BLUE, GREEN —
MAGENTA, CYAN — AMBER) beneath it. LIGHT and TEXTURE keep the thin-line
look untouched; this block only ever matches [data-family-section="COLOR"]. */
.effect-family-section[data-family-section="COLOR"] > .effect-family-heading{
display:flex !important;
align-items:center !important;
gap:9px !important;
min-height:47px !important;
height:auto !important;
padding:5px 9px !important;
margin:0 0 7px !important;
border:0 !important;
background:transparent !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:normal !important;
line-height:1.3 !important;
overflow:visible !important;
color:#888 !important;
cursor:pointer !important;
}
.effect-family-section[data-family-section="COLOR"] > .effect-family-heading > span:not(.mini-led):not(.info-dot){
display:inline !important;
}
.effect-family-section[data-family-section="COLOR"] > .effect-family-heading > .mini-led{
display:inline-block !important;
}
.effect-family-section[data-family-section="COLOR"] > .effect-family-heading > .info-dot{
display:inline-grid !important;
}
.effect-family-section[data-family-section="COLOR"] > .effect-family-heading::before,
.effect-family-section[data-family-section="COLOR"] > .effect-family-heading::after{
content:none !important;
display:none !important;
}
.effect-family-section[data-family-section="COLOR"] > .effect-family-heading .color-family-arrow{
width:9px;
flex:0 0 9px;
font-size:8px;
color:#777;
}
.effect-family-section[data-family-section="COLOR"] > .effect-family-heading[aria-expanded="true"] .color-family-arrow{
color:#aaa;
}
/* The generic rule above forces the subcategory list to stay display:block
at all times; for COLOR only, let its own [hidden] attribute actually hide
the three child rows when the parent is collapsed. */
.effect-family-section[data-family-section="COLOR"] > .family-subcategory-list[hidden]{
display:none !important;
}
/* LIGHT ONLY: same structural pattern as COLOR above -- reverse the
decorative-line-only treatment so LIGHT becomes a real, visible,
collapsible parent row over its six existing child effects. COLOR,
TEXTURE, and every other family section are untouched; this block only
ever matches [data-family-section="LIGHT"]. Deliberately not themed to
match COLOR/RELATIONAL FIELD yet -- that pass is deferred. */
.effect-family-section[data-family-section="LIGHT"] > .effect-family-heading{
display:flex !important;
align-items:center !important;
gap:9px !important;
min-height:47px !important;
height:auto !important;
padding:5px 9px !important;
margin:0 0 7px !important;
border:0 !important;
background:transparent !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:normal !important;
line-height:1.3 !important;
overflow:visible !important;
color:#888 !important;
cursor:pointer !important;
}
.effect-family-section[data-family-section="LIGHT"] > .effect-family-heading > span:not(.mini-led):not(.info-dot){
display:inline !important;
}
.effect-family-section[data-family-section="LIGHT"] > .effect-family-heading > .mini-led{
display:inline-block !important;
}
.effect-family-section[data-family-section="LIGHT"] > .effect-family-heading > .info-dot{
display:inline-grid !important;
}
.effect-family-section[data-family-section="LIGHT"] > .effect-family-heading::before,
.effect-family-section[data-family-section="LIGHT"] > .effect-family-heading::after{
content:none !important;
display:none !important;
}
.effect-family-section[data-family-section="LIGHT"] > .effect-family-heading .light-family-arrow{
width:9px;
flex:0 0 9px;
font-size:8px;
color:#777;
}
.effect-family-section[data-family-section="LIGHT"] > .effect-family-heading[aria-expanded="true"] .light-family-arrow{
color:#aaa;
}
.effect-family-section[data-family-section="LIGHT"] > .family-subcategory-list[hidden]{
display:none !important;
}
/* FX parent -- same compact structural pattern as COLOR/LIGHT above, but
grouping six existing systems that live across five different sibling
containers (the TEXTURE effect-family-section holds both TEXTURE BANK and
PATTERN BANK; RELATIONAL and VOLUMETRIC each hold one; CHROMA_DNA and
LUMENS_DNA are standalone top-level drawers). Nothing about any of the six
systems' own internal layout, breakers, or heading treatment changes --
this only adds one new clickable heading and a shared [hidden] toggle
across those five existing containers, tagged .fx-managed-child. Not
themed to match COLOR/LIGHT yet -- that pass is deferred. */
.fx-parent-heading{
display:flex !important;
align-items:center !important;
gap:9px !important;
min-height:47px !important;
height:auto !important;
padding:5px 9px !important;
margin:0 0 7px !important;
border:0 !important;
background:transparent !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:normal !important;
line-height:1.3 !important;
overflow:visible !important;
color:#888 !important;
cursor:pointer !important;
}
.fx-parent-heading > span:not(.mini-led):not(.info-dot){
display:inline !important;
}
.fx-parent-heading > .mini-led{
display:inline-block !important;
}
.fx-parent-heading > .info-dot{
display:inline-grid !important;
}
.fx-parent-heading::before,
.fx-parent-heading::after{
content:none !important;
display:none !important;
}
.fx-parent-heading .fx-parent-arrow{
width:9px;
flex:0 0 9px;
font-size:8px;
color:#777;
}
.fx-parent-heading[aria-expanded="true"] .fx-parent-arrow{
color:#aaa;
}
.fx-managed-child[hidden]{
display:none !important;
}
/* Three .family-rule separators (before CHROMA_DNA, before LUMENS_DNA, and
before HARDWARE) each immediately follow an .fx-managed-child. FX itself
now provides that grouping, so these are redundant -- suppressed, not
replaced with another separator. Matches only rules directly after an FX
child; no other .family-rule elsewhere in the panel is affected. */
.fx-managed-child + .family-rule{
display:none !important;
}
/* ==========================================================
CG-6 FX HARDWARE BREAKERS
FEATHER / SATURATE / DESATURATE / OPACITY / BLUR get the
same theme LED + breaker hardware as the parent engines.
========================================================== */
.category-fx-toggle,
.mask-effect-toggle{
display:flex !important;
align-items:center !important;
min-height:39px !important;
}
.category-fx-toggle > .fx-mini-led,
.mask-effect-toggle > .fx-mini-led{
display:inline-block !important;
visibility:visible !important;
opacity:1 !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
min-height:18px !important;
max-width:18px !important;
max-height:18px !important;
flex:0 0 18px !important;
margin:0 6px 0 3px !important;
border:0 !important;
border-radius:50% !important;
background-color:transparent !important;
background-image:url("../app_images/knobs/processing_LED.png") !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:18px 18px !important;
box-shadow:none !important;
}
.category-fx-toggle > .fx-mini-led.on,
.mask-effect-toggle > .fx-mini-led.on{
background-image:url("../app_images/knobs/ready_LED.png") !important;
}
.category-fx-toggle > .fx-breaker,
.mask-effect-toggle > .fx-breaker{
margin-left:auto !important;
flex:0 0 78px !important;
display:inline-block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
CG-6 DIGITAL READOUT SIZE PASS
Larger numeric bins for MASK + nested FX. Primary COLOR/LIGHT
readouts are created/styled by site.js with the same footprint.
========================================================== */
.mask-function-head output,
.category-fx-readout{
min-width:64px !important;
padding:5px 8px !important;
font-size:16px !important;
line-height:1.15 !important;
}
/* ==========================================================
CG-6 NEURO-IMAGE — PREVIOUS CONTROL-PANEL PROPORTIONS
CSS-only restoration. Scoped to NEURO-IMAGE so NEUROLAB
and all processing/state logic remain untouched.
========================================================== */
body[data-app="neuro-image"] .drawer-head,
body[data-app="neuro-image"] .family-subcategory-toggle{
min-height:47px !important;
padding:5px 9px !important;
gap:9px !important;
}
body[data-app="neuro-image"] .drawer-title,
body[data-app="neuro-image"] .family-subcategory-toggle{
font-size:13px !important;
font-weight:800 !important;
}
body[data-app="neuro-image"] .arrow,
body[data-app="neuro-image"] .family-subcategory-arrow{
font-size:14px !important;
width:15px !important;
flex:0 0 15px !important;
}
body[data-app="neuro-image"] .drawer-head > .mini-led,
body[data-app="neuro-image"] .family-subcategory-toggle > .mini-led{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
margin:0 8px 0 4px !important;
background-size:28px 28px !important;
}
body[data-app="neuro-image"] .breaker{
width:92px !important;
height:37px !important;
min-width:92px !important;
min-height:37px !important;
background-size:contain !important;
}
body[data-app="neuro-image"] .family-subcategory-toggle > .breaker,
body[data-app="neuro-image"] .drawer-head > .breaker{
flex:0 0 92px !important;
margin-left:auto !important;
}
body[data-app="neuro-image"] .info-dot{
width:22px !important;
height:22px !important;
min-width:22px !important;
min-height:22px !important;
flex:0 0 22px !important;
}
body[data-app="neuro-image"] .drawer,
body[data-app="neuro-image"] .effect-family-section .family-subcategory{
margin-bottom:8px !important;
}
/* Keep nested FX proportional to the restored parent hardware. */
body[data-app="neuro-image"] .category-fx-toggle,
body[data-app="neuro-image"] .mask-effect-toggle{
min-height:45px !important;
padding:5px 8px !important;
gap:8px !important;
font-size:12px !important;
}
body[data-app="neuro-image"] .category-fx-toggle > .fx-mini-led,
body[data-app="neuro-image"] .mask-effect-toggle > .fx-mini-led{
width:22px !important;
height:22px !important;
min-width:22px !important;
min-height:22px !important;
max-width:22px !important;
max-height:22px !important;
flex:0 0 22px !important;
background-size:22px 22px !important;
}
/* .fx-breaker carries the base .breaker class too, so it should already
inherit .breaker's explicit width/height/min-width/min-height/
background-size from the rule above -- but the live site shows it
isn't landing (verified via DevTools computed style), leaving its
height unconstrained and vertically off-center inside its flex row.
Restating those same explicit values here, at the same specificity
.fx-breaker's own flex-basis rule already uses, removes any doubt:
this is the exact sizing .breaker gets, not a copy that could drift. */
body[data-app="neuro-image"] .category-fx-toggle > .fx-breaker,
body[data-app="neuro-image"] .mask-effect-toggle > .fx-breaker{
flex:0 0 92px !important;
width:92px !important;
height:37px !important;
min-width:92px !important;
min-height:37px !important;
background-size:contain !important;
}
/* ==========================================================
CG-6 NEURO-IMAGE — RESTORE CATEGORY CHECKER PATTERN
Original row colors from previous working appearance:
DARK #181818
LIGHT #232323
========================================================== */
/* ROOT / IMAGE / MASK */
body[data-app="neuro-image"] .drawer{
background:#181818 !important;
}
body[data-app="neuro-image"] .drawer:nth-of-type(even){
background:#232323 !important;
}
/* COLOR continues the checker after MASK:
RED-BLUE light / GREEN-MAGENTA dark / CYAN-AMBER light */
body[data-app="neuro-image"] [data-family="COLOR"] .family-subcategory:nth-child(odd){
background:#232323 !important;
}
body[data-app="neuro-image"] [data-family="COLOR"] .family-subcategory:nth-child(even){
background:#181818 !important;
}
/* LIGHT:
DAYLIGHT dark / SUNSET light / XENON dark / LED light /
FLUORESCENT dark / TUNGSTEN HALO light */
body[data-app="neuro-image"] [data-family="LIGHT"] .family-subcategory:nth-child(odd){
background:#181818 !important;
}
body[data-app="neuro-image"] [data-family="LIGHT"] .family-subcategory:nth-child(even){
background:#232323 !important;
}
/* TEXTURE:
SCRATCH dark / CLUSTER light */
body[data-app="neuro-image"] [data-family="TEXTURE"] .family-subcategory:nth-child(odd){
background:#181818 !important;
}
body[data-app="neuro-image"] [data-family="TEXTURE"] .family-subcategory:nth-child(even){
background:#232323 !important;
}
/* VOLUMETRIC (E=MC3 BANK): continues the checker pattern from
RELATIONAL FIELD directly above it. RELATIONAL_FIELD and
VOLUMETRIC_INTEGRAL are each the sole item in a single-item family,
so both land on nth-child(odd) -- mapping odd the same way as every
other family here would put two dark rows back to back at that
seam. Swapping this family's odd/even mapping (instead of touching
RELATIONAL's, which is correctly continuing from TEXTURE) keeps the
alternation unbroken: RELATIONAL FIELD dark, E=MC3 BANK light. */
body[data-app="neuro-image"] [data-family="VOLUMETRIC"] .family-subcategory:nth-child(odd){
background:#232323 !important;
}
body[data-app="neuro-image"] [data-family="VOLUMETRIC"] .family-subcategory:nth-child(even){
background:#181818 !important;
}
/* RELATIONAL (RELATIONAL FIELD): the same missing-rule bug VOLUMETRIC
had above -- no rule existed here either, so this single-item family
fell back to no explicit background instead of the checker pattern
every other family section has. Continues the same alternation
directly from TEXTURE's ending (CLUSTER, light). */
body[data-app="neuro-image"] [data-family="RELATIONAL"] .family-subcategory:nth-child(odd){
background:#181818 !important;
}
body[data-app="neuro-image"] [data-family="RELATIONAL"] .family-subcategory:nth-child(even){
background:#232323 !important;
}
/* ==========================================================
CG-6 NEURO-IMAGE — RIGHT-PANEL UTILITY FOOTER
Existing GLOBAL RESET / SAVE / VIEW controls moved beneath
the Render Window. No typography or engine changes.
========================================================== */
body[data-app="neuro-image"] .neuro-image-layout{
height:calc(100vh - 86px);
}
body[data-app="neuro-image"] .render-stage{
flex-direction:column;
align-items:center;
justify-content:flex-start;
border:1px solid var(--edge);
}
body[data-app="neuro-image"] .render-stage > .utility-strip{
width:min(100%,1180px,calc((100vh - 161px) * 16 / 9));
height:44px;
min-height:44px;
flex:0 0 44px;
padding:0;
margin:0;
border-top:1px solid #181818;
border-bottom:0;
background:#111;
}
@media (max-width:980px){
body[data-app="neuro-image"] .neuro-image-layout{
height:auto;
}
}
/* ==========================================================
CG-6 NEURO-IMAGE — RIGHT PANEL GEOMETRY LOCK (CONTAINER-BASED)
The Render Window is true 16:9. Its width is limited by the
ACTUAL render-stage width and height, not guessed viewport offsets.
The utility strip is algebraically locked to the same width.
========================================================== */
@supports (width: 1cqw){
body[data-app="neuro-image"] .render-stage{
container-type:size !important;
gap:0 !important;
}
body[data-app="neuro-image"] .render-frame,
body[data-app="neuro-image"] .render-stage > .utility-strip{
width:min(100cqw,1180px,calc((100cqh - 44px) * 16 / 9)) !important;
max-width:none !important;
}
body[data-app="neuro-image"] .render-frame{
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:16 / 9 !important;
flex:0 0 auto !important;
}
@media (max-width:980px){
body[data-app="neuro-image"] .render-stage{
container-type:inline-size !important;
}
body[data-app="neuro-image"] .render-frame,
body[data-app="neuro-image"] .render-stage > .utility-strip{
width:min(100%,1180px) !important;
}
}
}
/* ==========================================================
CG-6 NEURO-IMAGE — DONOR GEOMETRY RATCHET
Desktop donor translation:
LEFT panel fixed; RIGHT render area takes all remaining space.
The canvas fills the render area. The image itself is fitted
proportionally by the existing site.js sourceGeometry() logic.
========================================================== */
body[data-app="neuro-image"] .neuro-image-layout{
display:grid !important;
grid-template-columns:390px minmax(0,1fr) !important;
min-width:0 !important;
}
body[data-app="neuro-image"] .render-stage{
min-width:0 !important;
min-height:0 !important;
display:grid !important;
grid-template-rows:minmax(0,1fr) 44px !important;
align-items:stretch !important;
justify-items:stretch !important;
justify-content:stretch !important;
gap:0 !important;
padding:10px !important;
container-type:normal !important;
}
body[data-app="neuro-image"] #renderFrame{
position:relative !important;
width:100% !important;
height:100% !important;
min-width:0 !important;
min-height:0 !important;
max-width:none !important;
max-height:none !important;
aspect-ratio:auto !important;
flex:none !important;
overflow:hidden !important;
}
body[data-app="neuro-image"] #renderCanvas{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
}
body[data-app="neuro-image"] .render-stage > .utility-strip{
width:100% !important;
max-width:none !important;
height:44px !important;
min-height:44px !important;
margin:0 !important;
flex:none !important;
align-self:stretch !important;
}
@media (max-width:980px){
body[data-app="neuro-image"] .neuro-image-layout{
grid-template-columns:270px minmax(0,1fr) !important;
}
}
@media (max-width:720px){
body[data-app="neuro-image"] .neuro-image-layout{
grid-template-columns:1fr !important;
}
body[data-app="neuro-image"] .render-stage{
min-height:520px !important;
}
}
/* ==========================================================
CG-6 NEURO-IMAGE — TYPOGRAPHY STANDARDIZATION PASS
Consolidates existing type styles into four families:
HEADER/CATEGORY, CONTROL LABEL, BUTTON LABEL, DIGITAL READOUT.
No layout, color, spacing, or behavior changes.
========================================================== */
/* 1) HEADER / CATEGORY
CONTROL PANEL, ROOT / IMAGE / MASK, RED — BLUE / CYAN — AMBER /
DAYLIGHT / SCRATCH / CLUSTER, etc. */
body[data-app="neuro-image"] .control-cap .control-title,
body[data-app="neuro-image"] .drawer-title,
body[data-app="neuro-image"] .family-subcategory-toggle{
font-family:Montserrat,"Segoe UI",Arial,sans-serif !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.04em !important;
text-decoration:none !important;
}
/* 2) CONTROL LABEL
PAINT ON, BRUSH COLOR, PATH, FILE, TARGET, SHIFT/CHAOS/RELATIVITY,
BRUSH SIZE, MASK FX, and nested FEATHER/SATURATE/DESATURATE/
OPACITY/BLUR toggle labels (same function as BRUSH SIZE/MASK FX). */
body[data-app="neuro-image"] .control-line > span,
body[data-app="neuro-image"] .readout-row > span,
body[data-app="neuro-image"] .mask-target-row > span,
body[data-app="neuro-image"] .mask-color-row > span,
body[data-app="neuro-image"] .mask-function-head > span,
body[data-app="neuro-image"] .mask-function-toggle:not(.family-subcategory-toggle) > span:not([class]),
body[data-app="neuro-image"] .options-shell-drawer .mask-function-body > div{
font-size:11px !important;
font-weight:800 !important;
}
/* 3) BUTTON LABEL
LOAD MASK, SAVE MASK, RESET CATEGORY, INVERT MASK, LOAD IMAGE,
LOAD CLUSTER, PEN TOOL, ERASER, CIRCLE/SQUARE/POINT TIP, the
BRUSH COLOR swatch buttons (BLUE/GRAY/RED), and the calibration
module's SAVE (.cg-calib-save) — same button family. */
body[data-app="neuro-image"] .mask-action-list button,
body[data-app="neuro-image"] .mask-color-row button,
body[data-app="neuro-image"] .mask-reset-category,
body[data-app="neuro-image"] .local-image-load,
body[data-app="neuro-image"] .cg-calib-save{
font-size:11px !important;
font-weight:800 !important;
}
/* 4) DIGITAL READOUT
GLOBAL, NO TARGET, LOCAL COMPUTER, NO IMAGE/NO MASK, and all
numeric/percentage values (FEATHER, SATURATE, BRUSH SIZE, etc). */
body[data-app="neuro-image"] .mask-target-row output,
body[data-app="neuro-image"] .mask-function-head output,
body[data-app="neuro-image"] .readout-row output,
body[data-app="neuro-image"] .category-fx-readout{
font-family:Consolas,monospace !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.04em !important;
}
/* ==========================================================
CG-6 NEURO-IMAGE — OPEN CATEGORY OUTLINE HIGHLIGHT
Keep category geometry unchanged; only brighten the existing
outer boundary while a top-level category is open.
========================================================== */
body[data-app="neuro-image"] .drawer.open,
body[data-app="neuro-image"] .family-subcategory.open{
border-color:#565656 !important;
}
/* ==========================================================
CG-6 NEURO-IMAGE — LIGHT CHECKER OPEN OUTLINE BOOST
Lighter #232323 category rows need a stronger neutral outline
when open so their boundary reads as clearly as dark rows.
Dark-row open outline remains #565656.
========================================================== */
body[data-app="neuro-image"] .drawer:nth-of-type(even).open,
body[data-app="neuro-image"] [data-family="COLOR"] .family-subcategory:nth-child(odd).open,
body[data-app="neuro-image"] [data-family="LIGHT"] .family-subcategory:nth-child(even).open,
body[data-app="neuro-image"] [data-family="TEXTURE"] .family-subcategory:nth-child(even).open{
border-color:#707070 !important;
}
/* ==========================================================
CG-6 NEURO-IMAGE — TARGET DROPDOWN CHARCOAL MENU
Keep the TARGET popup neutral charcoal instead of the browser's
bright blue selection fill. No geometry or behavior changes.
========================================================== */
body[data-app="neuro-image"] .family-target-select option{
background-color:#181818 !important;
color:#2f6fff !important;
}
body[data-app="neuro-image"] .family-target-select option:checked,
body[data-app="neuro-image"] .family-target-select option:hover,
body[data-app="neuro-image"] .family-target-select option:focus{
background-color:#232323 !important;
color:#2f6fff !important;
}
/* ==========================================================
CG-6 NEURO-IMAGE — DIGITAL BIN HARDWARE SPECIFICATION
One shared physical spec for every blue digital CGI readout:
PATH/FILE, TARGET/SET MASK/PAINT ON (output AND its JS-built