: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
}
.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}
.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");
}
/* ==========================================================
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;
}
.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;
}
/* ==========================================================
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;
}
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;
}
/* ==========================================================
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;
}
/* ==========================================================
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]){
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, and the
BRUSH COLOR swatch buttons (BLUE/GRAY/RED) — 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{
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