/*******************************************************************************
 Node graph design - site wide
 Pages look like Nuke's Node Graph: dotted background, content in "nodes"
 (category colour on top, postage-stamp thumbnails) and a yellow outline on
 hover like a selected node.
 *******************************************************************************/

:root {
	--tn-bg:#f1f1ef;
	--tn-dot:rgba(0,0,0,0.09);
	--tn-card:#fff;
	--tn-line:#dfdfdb;
	--tn-text:#151515;
	--tn-muted:#62646a;
	--tn-select:#f2b632;
	--tn-search:#2a2b2f;
	--tn-panel:#2b2c30;
	--tn-panel-text:#d9d9dc;
	--c-color:#58a36a;
	--c-filters:#d9853b;
	--c-python:#4f86d9;
	--c-gizmos:#9b6fc4;
	--c-3d:#cf5c6a;
	--c-free:#2c9f97;
	--c-tips:#8b8f99;
}
html[data-theme="dark"] {
	--tn-bg:#18191c;
	--tn-dot:rgba(255,255,255,0.07);
	--tn-card:#232428;
	--tn-line:#34353b;
	--tn-text:#efeff1;
	--tn-muted:#a5a6ac;
	--tn-search:#0f1012;
	--tn-panel:#111214;
}
.tn-dots {
	background-color:var(--tn-bg);
	background-image:radial-gradient(var(--tn-dot) 1px, transparent 1.4px);
	background-size:22px 22px;
}

.tn-page {
	float:left;
	width:100%;
	padding:110px 0 80px;
	color:var(--tn-text);
	text-align:left;
	background-color:var(--tn-bg);
	background-image:radial-gradient(var(--tn-dot) 1px, transparent 1.4px);
	background-size:22px 22px;
}
.tn-wrap { max-width:1240px; margin:0 auto; padding:0 60px; }
.tn-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* category colours */
.tn-c-color { --cat:var(--c-color); }
.tn-c-filters { --cat:var(--c-filters); }
.tn-c-python { --cat:var(--c-python); }
.tn-c-gizmos { --cat:var(--c-gizmos); }
.tn-c-3d { --cat:var(--c-3d); }
.tn-c-free { --cat:var(--c-free); }
.tn-c-tips { --cat:var(--c-tips); }

/*------ intro ------*/
.tn-hero { max-width:860px; margin-bottom:34px; }
.tn-page .tn-eyebrow {
	margin:0 0 14px;
	padding:0;
	color:var(--tn-muted);
	font-family:'futurastd-bold', sans-serif;
	font-size:11px;
	letter-spacing:3px;
	text-transform:uppercase;
}
.tn-page h1 {
	margin:0 0 18px;
	color:var(--tn-text);
	font-family:'FuturaPT-Book', sans-serif;
	font-size:50px;
	font-weight:400;
	line-height:1.08;
	text-align:left;
	text-transform:none;
	letter-spacing:0;
}
.tn-page .tn-lead { max-width:640px; margin:0; color:var(--tn-muted); font-size:17px; line-height:1.6; }
.tn-stats { display:flex; flex-wrap:wrap; gap:6px 26px; margin:22px 0 28px; color:var(--tn-muted); font-size:14px; }
.tn-stats b { color:var(--tn-text); font-family:'futurastd-bold', sans-serif; }
.tn-stats a { color:var(--tn-text); text-decoration:underline; }

/* search box, styled like Nuke's Tab node search */
.tn-search {
	position:relative;
	display:flex;
	align-items:center;
	gap:12px;
	max-width:720px;
	padding:0 18px;
	border:1px solid #3a3b40;
	border-radius:10px;
	background:var(--tn-search);
	box-shadow:0 12px 30px -18px rgba(0,0,0,0.6);
}
.tn-search .fa { color:#8f9096; font-size:15px; }
.tn-search input {
	flex:1;
	min-width:0;
	height:54px;
	border:0;
	outline:0;
	background:transparent;
	color:#f2f2f3;
	font-family:'FuturaPT-Book', sans-serif;
	font-size:17px;
}
.tn-search input::placeholder { color:#8f9096; }
.tn-search:focus-within { border-color:var(--tn-select); box-shadow:0 0 0 3px rgba(242,182,50,0.25); }
.tn-key { color:#8f9096; font-size:12px; white-space:nowrap; }
.tn-key kbd {
	display:inline-block;
	min-width:22px;
	padding:2px 6px;
	border:1px solid #4a4b52;
	border-bottom-width:2px;
	border-radius:5px;
	color:#e6e6e8;
	font-family:inherit;
	font-size:11px;
	text-align:center;
}

/* topic filters */
.tn-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tn-chip {
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 14px;
	border:1px solid var(--tn-line);
	border-radius:8px;
	background:var(--tn-card);
	color:var(--tn-text);
	font-family:'FuturaPT-Book', sans-serif;
	font-size:13px;
	line-height:1;
	cursor:pointer;
	transition:border-color 150ms ease, box-shadow 150ms ease;
}
.tn-chip:hover { border-color:var(--tn-muted); }
.tn-chip[aria-pressed="true"] { border-color:var(--tn-select); box-shadow:0 0 0 2px var(--tn-select); }
.tn-chip:focus-visible { outline:2px solid var(--tn-select); outline-offset:2px; }
.tn-dot { width:9px; height:9px; border-radius:2px; background:var(--cat); }
.tn-chip-n { color:var(--tn-muted); font-size:11px; }
.tn-page .tn-results { margin:16px 0 0; padding:0; color:var(--tn-muted); font-size:13px; }
.tn-results b { color:var(--tn-text); }

/*------ node grid ------*/
.tn-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
	gap:34px 24px;
	margin:0;
	padding:12px 0 0;
	list-style:none;
}
.tn-node {
	position:relative;
	display:flex;
	flex-direction:column;
	border:1px solid var(--tn-line);
	border-top:6px solid var(--cat, var(--c-tips));
	border-radius:10px;
	background:var(--tn-card);
	box-shadow:0 10px 24px -20px rgba(0,0,0,0.55);
	transition:transform 180ms ease, box-shadow 180ms ease;
}
.tn-node[hidden] { display:none; }
/* input and output connectors, like a node in the Node Graph */
.tn-node:before, .tn-node:after {
	content:'';
	position:absolute;
	left:50%;
	width:10px;
	height:10px;
	margin-left:-5px;
	border:2px solid var(--tn-bg);
	border-radius:50%;
	background:var(--tn-line);
}
.tn-node:before { top:-13px; background:var(--cat, var(--c-tips)); }
.tn-node:after { bottom:-7px; }
.tn-node:hover, .tn-node:focus-within {
	transform:translateY(-3px);
	box-shadow:0 0 0 2px var(--tn-select), 0 18px 34px -20px rgba(0,0,0,0.6);
}
/* the category colour comes from the first topic of each node */
.tn-node[data-cat^="color"] { --cat:var(--c-color); }
.tn-node[data-cat^="filters"] { --cat:var(--c-filters); }
.tn-node[data-cat^="python"] { --cat:var(--c-python); }
.tn-node[data-cat^="gizmos"] { --cat:var(--c-gizmos); }
.tn-node[data-cat^="3d"] { --cat:var(--c-3d); }
.tn-node[data-cat^="free"] { --cat:var(--c-free); }
.tn-node[data-cat^="tips"] { --cat:var(--c-tips); }

.tn-thumb { position:relative; overflow:hidden; margin:10px 10px 0; border-radius:6px; background:var(--tn-line); aspect-ratio:16 / 9; }
.tn-thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 400ms ease; }
.tn-node:hover .tn-thumb img { transform:scale(1.04); }
.tn-badge {
	position:absolute;
	top:10px;
	left:10px;
	padding:4px 8px;
	border-radius:4px;
	background:var(--tn-select);
	color:#111;
	font-family:'futurastd-bold', sans-serif;
	font-size:10px;
	letter-spacing:1.5px;
	text-transform:uppercase;
}
.tn-body { display:flex; flex:1; flex-direction:column; padding:16px 18px 18px; }
.tn-cat {
	margin-bottom:8px;
	color:var(--cat);
	font-family:'futurastd-bold', sans-serif;
	font-size:10px;
	letter-spacing:1.5px;
	text-transform:uppercase;
}
.tn-page .tn-node h3 {
	margin:0 0 8px;
	color:var(--tn-text);
	font-family:'FuturaPT-Book', sans-serif;
	font-size:20px;
	font-weight:500;
	line-height:1.25;
	text-align:left;
	text-transform:none;
	letter-spacing:0;
}
.tn-link { color:inherit; }
/* the whole node is clickable through the title link */
.tn-link:after { content:''; position:absolute; inset:0; z-index:1; border-radius:10px; }
.tn-page .tn-node p { flex:1; margin:0 0 14px; padding:0; color:var(--tn-muted); font-size:14px; line-height:1.55; }
.tn-more { color:var(--tn-text); font-size:13px; }
.tn-more:after { content:' \2192'; }
.tn-more-link { position:relative; z-index:2; text-decoration:underline; }
.tn-more-link:after { content:''; }

/* the newest article gets a wider node while nothing is filtered */
@media only screen and (min-width: 900px) {
	.tn-grid:not(.is-filtered) .tn-node--feature { grid-column:span 2; flex-direction:row; }
	.tn-grid:not(.is-filtered) .tn-node--feature .tn-thumb { flex:0 0 58%; align-self:center; margin:10px 0 10px 10px; }
	.tn-grid:not(.is-filtered) .tn-node--feature .tn-body { justify-content:center; padding:24px 26px; }
	.tn-grid:not(.is-filtered) .tn-node--feature h3 { font-size:28px; }
}

.tn-empty { padding:40px 0 10px; text-align:center; }
.tn-page .tn-empty p { margin-bottom:14px; color:var(--tn-muted); text-align:center; }

/*------ keep exploring: nodes connected by a pipe ------*/
.tn-explore { margin-top:70px; }
.tn-page .tn-explore h2 { margin:0 0 22px; color:var(--tn-text); font-size:28px; font-weight:400; text-align:left; }
.tn-pipe { position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin:0; padding:0; list-style:none; }
.tn-pipe:before { content:''; position:absolute; top:50%; left:4%; right:4%; height:2px; background:var(--tn-line); }
.tn-pipe a {
	position:relative;
	display:block;
	padding:18px 20px;
	border:1px solid var(--tn-line);
	border-radius:10px;
	background:var(--tn-card);
	color:var(--tn-text);
	transition:box-shadow 150ms ease;
}
.tn-pipe a:hover, .tn-pipe a:focus-visible { box-shadow:0 0 0 2px var(--tn-select); outline:none; }
.tn-pipe b { display:block; font-family:'futurastd-bold', sans-serif; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
.tn-pipe span { display:block; margin-top:4px; color:var(--tn-muted); font-size:13px; }

/*------ smaller screens ------*/
@media only screen and (max-width: 1036px) {
	.tn-page { padding-top:90px; }
	.tn-wrap { padding:0 16px; }
	.tn-page h1 { font-size:34px; }
	.tn-key { display:none; }
	.tn-pipe { grid-template-columns:repeat(2, 1fr); }
	.tn-pipe:before { display:none; }
}
@media (prefers-reduced-motion: reduce) {
	.tn-node, .tn-thumb img { transition:none; }
}

/*------ extra topics used on the Gizmo and Scripting pages ------*/
.tn-c-keying, .tn-node[data-cat^="keying"] { --cat:var(--c-color); }
.tn-c-transform, .tn-node[data-cat^="transform"] { --cat:var(--c-gizmos); }
.tn-c-utilities, .tn-node[data-cat^="utilities"] { --cat:var(--c-tips); }
.tn-c-rig, .tn-node[data-cat^="rig"] { --cat:var(--c-free); }

/* video thumbnails stay playable above the node's full-card link */
.tn-thumb--video { position:relative; z-index:2; }
.tn-thumb--video iframe { display:block; width:100%; height:100%; border:0; }

/* footer with a main action and a secondary download link */
.tn-foot { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px; }

/*==============================================================================
 Site-wide: the template's components restyled as nodes.
 "html:root" is only there to outrank the dark-mode rules in yourstyle.css.
==============================================================================*/

/*------ dotted Node Graph background behind every page ------*/
html:root body {
	background-color:var(--tn-bg);
	background-image:radial-gradient(var(--tn-dot) 1px, transparent 1.4px);
	background-size:22px 22px;
	background-attachment:fixed;
}
/* sections stay opaque (they cover fixed background photos like the one in About),
   with the same fixed dot grid so they blend with the page */
html:root section,
html:root .sections-bg,
html:root .fixed-info-container {
	background-color:var(--tn-bg);
	background-image:radial-gradient(var(--tn-dot) 1px, transparent 1.4px);
	background-size:22px 22px;
	background-attachment:fixed;
}
html:root .order-holder,
html:root .inline-facts { background:transparent; }
html:root .left-decor, html:root .right-decor,
html:root .fixed-wrap:before, html:root .fixed-wrap:after,
html:root .section-columns:before { background:var(--tn-bg); }
html:root .flat-form { border-top-color:transparent; }

/*------ buttons ------*/
html:root .btn {
	border:1px solid var(--tn-line);
	border-radius:8px;
	background:var(--tn-card);
	color:var(--tn-text);
	box-shadow:0 8px 20px -16px rgba(0,0,0,0.6);
	transition:box-shadow 150ms ease, transform 150ms ease;
}
html:root .btn:hover, html:root .btn:focus-visible { box-shadow:0 0 0 2px var(--tn-select); outline:none; }
html:root .wt-btn { border-color:rgba(255,255,255,0.7); background:rgba(17,18,20,0.35); color:#fff; }

/*------ cards shared by portfolio items, collaborations, project boxes ------*/
.gallery-item.work { --cat:var(--c-python); }
.gallery-item.personal { --cat:var(--c-3d); }
.gallery-item.scripting { --cat:var(--c-free); }
.gallery-item.gizmo { --cat:var(--c-gizmos); }
.students-grid, .team-holder { --cat:var(--c-free); }

html:root .gallery-items .grid-item-holder,
html:root .students-grid .grid-item-holder,
html:root .team-box {
	position:relative;
	border:1px solid var(--tn-line);
	border-top:6px solid var(--cat, var(--c-tips));
	border-radius:10px;
	background:var(--tn-card);
	box-shadow:0 10px 24px -20px rgba(0,0,0,0.55);
	transition:transform 180ms ease, box-shadow 180ms ease;
}
html:root .grid-big-pad .grid-item-holder { width:calc(100% - 28px); margin:16px 14px; padding:10px 10px 16px; }
html:root .students-grid .grid-item-holder { padding:10px 10px 16px; }
html:root .team-box { padding:10px 10px 6px; }
/* input / output connectors */
html:root .gallery-items .grid-item-holder:before, html:root .gallery-items .grid-item-holder:after,
html:root .students-grid .grid-item-holder:before, html:root .students-grid .grid-item-holder:after,
html:root .team-box:before, html:root .team-box:after {
	content:"";
	position:absolute;
	left:50%;
	z-index:4;
	width:10px;
	height:10px;
	margin-left:-5px;
	border:2px solid var(--tn-bg);
	border-radius:50%;
	background:var(--tn-line);
}
html:root .gallery-items .grid-item-holder:before, html:root .students-grid .grid-item-holder:before, html:root .team-box:before { top:-13px; background:var(--cat, var(--c-tips)); }
html:root .gallery-items .grid-item-holder:after, html:root .students-grid .grid-item-holder:after, html:root .team-box:after { bottom:-7px; }
html:root .gallery-items .grid-item-holder:hover,
html:root .students-grid .grid-item-holder:hover,
html:root .team-box:hover {
	transform:translateY(-3px);
	box-shadow:0 0 0 2px var(--tn-select), 0 18px 34px -20px rgba(0,0,0,0.6);
}
html:root .box-item a, html:root .team-photo { overflow:hidden; border-radius:6px; }
html:root .box-item a .overlay { border-radius:6px; }

/* titles under the portfolio thumbnails */
html:root .vis-port-info .grid-item h3, html:root .vis-port-info .grid-item h3 a { color:var(--tn-text); }
html:root .vis-port-info .grid-item span { color:var(--tn-muted); }
html:root .vis-port-info .grid-item span:before { background:var(--tn-line); }
html:root .team-info h3 { color:var(--tn-text); }
html:root .team-info h4 { color:var(--tn-muted); }

/* portfolio filters as node chips */
html:root .gallery-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
html:root .gallery-filters .gallery-filter {
	float:none;
	margin:0;
	padding:9px 15px;
	border:1px solid var(--tn-line);
	border-radius:8px;
	background:var(--tn-card);
	color:var(--tn-text);
	text-decoration:none;
}
html:root .gallery-filters .gallery-filter:hover { border-color:var(--tn-muted); }
html:root .gallery-filters .gallery-filter-active { box-shadow:0 0 0 2px var(--tn-select); border-color:var(--tn-select); text-decoration:none; }

/* showreel players and logo strip */
html:root .embed-container { border-radius:12px; box-shadow:0 18px 40px -26px rgba(0,0,0,0.7); }
html:root .embed-container iframe { border:0 !important; border-radius:12px; }
html:root .slider { border:1px solid var(--tn-line); border-radius:12px; box-shadow:0 12px 30px -24px rgba(0,0,0,0.6); }

/*------ dark side panels (services): like Nuke's Properties panel ------*/
html:root .section-columns-text { background:var(--tn-panel); }
html:root .servicses-holder li i { color:var(--tn-select); }
html:root .servicses-holder li:nth-child(5n+1) i { color:var(--c-color); }
html:root .servicses-holder li:nth-child(5n+2) i { color:var(--c-filters); }
html:root .servicses-holder li:nth-child(5n+3) i { color:var(--c-python); }
html:root .servicses-holder li:nth-child(5n+4) i { color:var(--c-gizmos); }
html:root .servicses-holder li:nth-child(5n+5) i { color:var(--c-3d); }

/*------ social row (About) ------*/
html:root .inline-facts:before { background:var(--tn-line); }
html:root .inline-facts a i {
	display:inline-block;
	width:58px;
	height:58px;
	line-height:58px;
	padding:0;
	border:1px solid var(--tn-line);
	border-top:4px solid var(--tn-select);
	border-radius:10px;
	background:var(--tn-card);
	color:var(--tn-text);
	opacity:1;
	transition:box-shadow 150ms ease;
}
html:root .inline-facts a:hover i { box-shadow:0 0 0 2px var(--tn-select); }

/*------ contact sections as a node ------*/
html:root .flat-form .container {
	max-width:760px;
	margin:40px auto 60px;
	padding:44px 40px 40px;
	border:1px solid var(--tn-line);
	border-top:6px solid var(--tn-select);
	border-radius:12px;
	background:var(--tn-card);
	box-shadow:0 14px 34px -26px rgba(0,0,0,0.6);
}

/*------ film and personal project pages ------*/
.ng-film .project-box img.respimg,
.ng-project .box-item img,
.ng-project .project-box img { border-radius:10px; }
.ng-film .col-md-7 > .project-box:first-child,
.ng-project .vertical-gallery .box-item {
	padding:10px;
	border:1px solid var(--tn-line);
	border-top:6px solid var(--cat);
	border-radius:12px;
	background:var(--tn-card);
	box-shadow:0 14px 34px -26px rgba(0,0,0,0.6);
}
.ng-project .vertical-gallery .box-item { margin-bottom:18px; }
/* the info column becomes a Properties panel */
html:root .ng-film .fix-box, html:root .ng-project .fix-box {
	overflow:hidden;
	border:1px solid #3a3b40;
	border-radius:12px;
	background:var(--tn-panel);
	box-shadow:0 18px 40px -26px rgba(0,0,0,0.7);
}
html:root .ng-film .fix-box:before, html:root .ng-project .fix-box:before {
	content:"Properties";
	display:block;
	padding:9px 16px;
	border-bottom:1px solid #3a3b40;
	background:var(--cat);
	color:#111;
	font-family:"futurastd-bold", sans-serif;
	font-size:10px;
	letter-spacing:2px;
	text-transform:uppercase;
}
html:root .fix-box .project-box { margin:0; padding:22px 22px 6px; }
html:root .fix-box .project-box h3 {
	padding-bottom:12px;
	color:#8f9096;
	font-size:12px;
	letter-spacing:2px;
	text-transform:uppercase;
}
html:root .fix-box .project-box p, html:root .fix-box .project-box p i { color:var(--tn-panel-text); }
html:root .fix-box .project-details { border-bottom:0; }
html:root .fix-box .project-details li {
	margin-bottom:6px;
	padding:2px 0;
	border:1px solid #3a3b40;
	border-radius:6px;
	background:rgba(255,255,255,0.03);
}
html:root .fix-box .project-details li i { top:13px; left:12px; color:var(--tn-select); }
html:root .fix-box .pd-holder h5, html:root .fix-box .pd-holder h5 a {
	padding:9px 0;
	color:var(--tn-panel-text);
	font-family:"FuturaPT-Book", sans-serif;
	font-style:normal;
}
html:root .fix-box .btn { margin:14px 0 20px; }
/* previous / next / all projects */
html:root .content-nav { margin-top:14px; padding:12px 18px; border:1px solid var(--tn-line); border-radius:10px; background:var(--tn-card); }
html:root .content-nav a, html:root .content-nav span, html:root .p-all a { color:var(--tn-text); }
html:root .p-all { top:18px; right:18px; }

/*------ tutorial articles ------*/
html:root .ng-article .column-container article {
	margin:30px 0 40px;
	padding:44px 48px 36px;
	border:1px solid var(--tn-line);
	border-top:6px solid var(--cat, var(--c-tips));
	border-radius:14px;
	background:var(--tn-card);
	box-shadow:0 18px 40px -30px rgba(0,0,0,0.6);
}
.ng-article article h3:before, .ng-article article h4:before {
	content:"";
	display:inline-block;
	width:10px;
	height:10px;
	margin-right:10px;
	border-radius:2px;
	background:var(--cat, var(--c-tips));
	vertical-align:middle;
}
.ng-article article img { max-width:100%; border-radius:8px; }
.ng-article article hr { border:0; border-top:1px solid var(--tn-line); }
.ng-article article pre, .ng-article article pre[class*="language-"] { border-radius:10px; }
html:root .ng-article .blog-title li { display:inline-block; margin:0 6px 8px 0; }
html:root .ng-article .blog-title li a.tag {
	display:inline-block;
	max-width:100%;
	padding:7px 12px;
	border:1px solid var(--tn-line);
	border-radius:8px;
	background:var(--tn-bg);
	color:var(--tn-text);
	font-family:"FuturaPT-Book", sans-serif;
	font-size:12px;
	text-transform:none;
	word-break:break-all;
	transition:box-shadow 150ms ease;
}
html:root .ng-article .blog-title li a.tag:hover { box-shadow:0 0 0 2px var(--tn-select); }
/* a coloured node strip under the hero title */
.ng-article .parallax-section .separator { background:var(--cat, #fff); height:4px; }

/*------ home: the title sits in a glass node over the slideshows ------*/
html:root .ng-home .slide-title {
	width:560px;
	max-width:calc(100% - 32px);
	margin:0 auto;
	transform:translateY(-50%);
	padding:28px 40px 26px;
	border:1px solid rgba(255,255,255,0.14);
	border-top:6px solid var(--tn-select);
	border-radius:14px;
	background:rgba(17,18,20,0.55);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	box-shadow:0 20px 50px -20px rgba(0,0,0,0.7);
}

@media only screen and (max-width: 1036px) {
	html:root .ng-article .column-container article { padding:30px 20px 24px; }
	html:root .flat-form .container { padding:34px 20px 30px; }
	html:root .grid-big-pad .grid-item-holder { margin:12px 0; width:100%; }
}

/* light theme: brand-coloured contact links and category labels need a darker tint on white */
html:not([data-theme="dark"]) font[color="#87CEFA"] { color:#1f7fb8; }
html:not([data-theme="dark"]) font[color="#FFD700"] { color:#9a7400; }
html:not([data-theme="dark"]) .tn-cat { color:color-mix(in srgb, var(--cat) 75%, #000); }

/*------ before / after: white line on the split ------*/
.beer-reveal { border-right:2px solid #fff; box-shadow:2px 0 8px rgba(0,0,0,0.35); }

/*------ portfolio A/B Viewer (like Nuke's Viewer with a wipe) ------*/
.ab-viewer {
	max-width:1100px;
	margin:30px auto 10px;
	overflow:hidden;
	border:1px solid #3a3b40;
	border-radius:14px;
	background:var(--tn-panel);
	text-align:left;
	box-shadow:0 24px 50px -30px rgba(0,0,0,0.8);
}
.ab-bar {
	display:flex;
	align-items:center;
	gap:14px;
	padding:10px 16px;
	border-bottom:1px solid #3a3b40;
	color:#c9cacf;
	font-size:13px;
}
.ab-name { color:var(--tn-select); font-family:"futurastd-bold", sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; }
.ab-label { flex:1; }
.ab-count { color:#8f9096; font-size:12px; }
.ab-count b { color:#fff; }
.ab-stage { position:relative; background:#000; }
.ab-shot { display:none; }
.ab-shot.is-active { display:block; animation:ab-fade 450ms ease; }
.ab-shot .beer-slider { display:block; width:100%; }
.ab-shot .beer-slider > img { display:block; width:100%; }
@keyframes ab-fade { from { opacity:0; } to { opacity:1; } }
.ab-strip { display:flex; gap:10px; padding:12px; overflow-x:auto; }
.ab-thumb {
	position:relative;
	flex:0 0 150px;
	overflow:hidden;
	padding:0;
	border:2px solid transparent;
	border-radius:8px;
	background:none;
	opacity:0.55;
	cursor:pointer;
	transition:opacity 150ms ease, border-color 150ms ease;
}
.ab-thumb img { display:block; width:100%; aspect-ratio:2.4; object-fit:cover; }
.ab-thumb span {
	position:absolute;
	left:7px;
	bottom:5px;
	color:#fff;
	font-family:"futurastd-bold", sans-serif;
	font-size:11px;
	text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.ab-thumb:hover, .ab-thumb:focus-visible { opacity:1; outline:none; }
.ab-thumb.is-active { opacity:1; border-color:var(--tn-select); }
/* autoplay progress on the active shot */
.ab-thumb:after { content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--tn-select); }
.ab-viewer.is-playing .ab-thumb.is-active:after { animation:ab-progress 7s linear forwards; }
@keyframes ab-progress { to { width:100%; } }

/*------ logo strips: separate tiles, seamless and faster loop ------*/
html:root .slider {
	width:100%;
	max-width:100%;
	height:auto;
	padding:14px 0;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	-webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
html:root .slider:before, html:root .slider:after { display:none; }
html:root .slider .slide { height:auto; padding:0 8px; }
html:root .slider .slide img {
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:250 / 100;
	object-fit:cover;
	border:1px solid var(--tn-line);
	border-radius:10px;
	box-shadow:0 10px 22px -18px rgba(0,0,0,0.6);
}
html:root .slider.slider-companies .slide-track {
	width:calc(250px * var(--n, 13) * 2);
	-webkit-animation:ng-marquee calc(var(--n, 13) * 2.2s) linear infinite;
	animation:ng-marquee calc(var(--n, 13) * 2.2s) linear infinite;
}
html:root .slider:hover .slide-track { -webkit-animation-play-state:paused; animation-play-state:paused; }
@keyframes ng-marquee { from { transform:translateX(0); } to { transform:translateX(calc(-250px * var(--n, 13))); } }
@media (prefers-reduced-motion: reduce) {
	html:root .slider.slider-companies .slide-track { animation-duration:calc(var(--n, 13) * 6s); }
}
@media only screen and (max-width: 1036px) {
	.ab-thumb { flex-basis:110px; }
}

/*------ portfolio grid: a real CSS grid (Isotope's absolute positions overlapped
         when lazy images grew after the layout was computed) ------*/
.ng-gallery {
	display:grid;
	grid-template-columns:repeat(6, minmax(0, 1fr));
	gap:34px 20px;
	clear:both;
	width:100%;
	padding:24px 30px 50px;
}
@media only screen and (max-width: 1700px) { .ng-gallery { grid-template-columns:repeat(5, minmax(0, 1fr)); } }
@media only screen and (max-width: 1400px) { .ng-gallery { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media only screen and (max-width: 1100px) { .ng-gallery { grid-template-columns:repeat(3, minmax(0, 1fr)); padding:24px 16px 40px; } }
@media only screen and (max-width: 760px) { .ng-gallery { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 12px; } }
@media only screen and (max-width: 440px) { .ng-gallery { grid-template-columns:1fr; } }
html:root .ng-gallery .gallery-item { float:none; width:auto !important; position:static; }
html:root .ng-gallery .gallery-item[hidden] { display:none; }
html:root .ng-gallery .grid-item-holder {
	position:relative;
	float:none;
	width:100%;
	height:100%;
	margin:0;
	padding:10px 10px 14px;
	border:1px solid var(--tn-line);
	border-top:6px solid var(--cat, var(--c-tips));
	border-radius:10px;
	background:var(--tn-card);
	box-shadow:0 10px 24px -20px rgba(0,0,0,0.55);
	transition:transform 180ms ease, box-shadow 180ms ease;
}
html:root .ng-gallery .grid-item-holder:before, html:root .ng-gallery .grid-item-holder:after {
	content:"";
	position:absolute;
	left:50%;
	z-index:4;
	width:10px;
	height:10px;
	margin-left:-5px;
	border:2px solid var(--tn-bg);
	border-radius:50%;
	background:var(--tn-line);
}
html:root .ng-gallery .grid-item-holder:before { top:-13px; background:var(--cat, var(--c-tips)); }
html:root .ng-gallery .grid-item-holder:after { bottom:-7px; }
html:root .ng-gallery .grid-item-holder:hover {
	transform:translateY(-3px);
	box-shadow:0 0 0 2px var(--tn-select), 0 18px 34px -20px rgba(0,0,0,0.6);
}
/* every thumbnail the same 16:9 frame, so rows line up */
html:root .ng-gallery .box-item a { display:block; aspect-ratio:16 / 9; }
html:root .ng-gallery .box-item a img { width:100%; height:100%; object-fit:cover; }
html:root .ng-gallery .grid-item { float:none; width:100%; padding:14px 4px 4px; }
html:root .ng-gallery .grid-item h3 { float:none; font-size:11px; line-height:1.4; }

/*------ logo strips: faster ------*/
html:root .slider.slider-companies .slide-track {
	-webkit-animation-duration:calc(var(--n, 13) * 1.2s);
	animation-duration:calc(var(--n, 13) * 1.2s);
}

/*------ centred row of buttons (portfolio interview) ------*/
.ng-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:26px 0 10px; }
html:root .ng-actions .btn { float:none; margin:0; }
@media (prefers-reduced-motion: reduce) {
	html:root .slider.slider-companies .slide-track { animation-duration:calc(var(--n, 13) * 6s); }
}

/* footer social icons a little bigger */
html:root .footer-social li a { padding:0 9px; font-size:17px; transition:color 150ms ease; }
html:root .footer-social li a:hover { color:var(--tn-select); }

/* logo strips driven by nodegraph.js: drag / flick like a wheel */
html:root .slider.is-wheel { cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
html:root .slider.is-wheel.is-grabbing { cursor:grabbing; }
html:root .slider.is-wheel .slide-track { -webkit-animation:none; animation:none; will-change:transform; }
html:root .slider.is-wheel img { pointer-events:none; }

/* reset.css makes every link position:relative, which shrank the full-card click area
   to the title text: let it stretch over the whole node again (thumbnail included) */
.tn-node .tn-link { position:static; }


/*------ ColorMatrix tutorial: matrix grids, paste-in-Nuke snippets, live Lab ------*/
.cm-matrix { margin:6px auto 12px; border-collapse:separate; border-spacing:4px; font-family:Consolas, Menlo, "Courier New", monospace; font-size:13px; }
.cm-matrix th { padding:2px 6px; color:var(--tn-muted); font-family:"FuturaPT-Book", sans-serif; font-size:11px; font-weight:normal; letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap; text-align:left; }
.cm-matrix tr:first-child th { text-align:center; }
.cm-matrix td { min-width:68px; padding:8px 8px; border:1px solid var(--tn-line); border-radius:6px; background:var(--tn-bg); color:var(--tn-text); text-align:center; }
.cm-matrix td.is-zero { color:var(--tn-muted); }
.cm-matrix td.is-neg { color:#d9483b; }
.cm-ch { display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:2px; vertical-align:middle; }
.cm-ch--r { background:#e5484d; } .cm-ch--g { background:#30a46c; } .cm-ch--b { background:#3e7bfa; }
html:root .ng-article input.cm-values { display:block; width:100%; max-width:100%; margin:0 0 8px; padding:7px 10px; border:1px solid var(--tn-line); border-radius:8px; background:var(--tn-bg); color:var(--tn-text); font-family:Consolas, Menlo, "Courier New", monospace; font-size:12px; }
html:root .ng-article textarea.cm-snippet { display:block; width:100%; height:auto; min-height:0; margin:0 0 10px; padding:10px 12px; border:1px solid #000; border-radius:8px; background:var(--tn-panel); color:var(--tn-panel-text); font-family:Consolas, Menlo, "Courier New", monospace; font-size:12px; line-height:1.45; resize:none; white-space:pre; overflow:auto; cursor:copy; }
html:root .ng-article textarea.cm-snippet:focus { outline:2px solid var(--tn-select); outline-offset:1px; }
.cm-formula { font-family:Consolas, Menlo, "Courier New", monospace; font-size:14px; }
.cm-small { color:var(--tn-muted); font-size:13px; }
.cm-example { clear:both; display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:26px; align-items:start; margin:6px 0 34px; }
.cm-example > img { width:100%; height:auto; }
.cm-example p { margin-top:0; }
.cm-example .cm-matrix { margin-left:0; }
.ng-article article blockquote .cm-matrix { margin-left:0; }
.ng-article article pre code { white-space:pre; }

.cm-lab { clear:both; display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:24px; align-items:start; margin:18px 0 8px; padding:18px; border:1px solid var(--tn-line); border-top:4px solid var(--cat, var(--tn-select)); border-radius:12px; background:var(--tn-bg); }
.cm-svg { position:absolute; width:0; height:0; overflow:hidden; }
.cm-lab-view { position:relative; overflow:hidden; border-radius:8px; background:#111; cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none; --wipe:50%; }
.ng-article article .cm-lab-view img { display:block; width:100%; height:auto; border-radius:0; pointer-events:none; }
.cm-lab-view .cm-lab-after { position:absolute; inset:0; filter:url(#cm-live); clip-path:inset(0 0 0 var(--wipe)); }
.cm-lab-line { position:absolute; top:0; bottom:0; left:var(--wipe); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 6px rgba(0,0,0,0.5); pointer-events:none; }
.cm-lab-tag { position:absolute; top:10px; padding:3px 8px; border-radius:4px; background:rgba(17,18,20,0.7); color:#fff; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; pointer-events:none; }
.cm-lab-tag--a { left:10px; } .cm-lab-tag--b { right:10px; }
.cm-lab-panel .cm-matrix { margin:0 0 6px; }
.cm-lab-grid td { padding:0; min-width:0; }
html:root .cm-lab-grid input { width:64px; margin:0; padding:7px 4px; border:0; border-radius:6px; background:transparent; color:var(--tn-text); font:13px Consolas, Menlo, "Courier New", monospace; text-align:center; -moz-appearance:textfield; }
.cm-lab-grid input::-webkit-inner-spin-button, .cm-lab-grid input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
html:root .cm-lab-grid input:focus { outline:2px solid var(--tn-select); }
.cm-lab-grid td.cm-sum { min-width:52px; padding:7px 4px; border-style:dashed; background:transparent; color:var(--tn-muted); }
.cm-lab-grid td.cm-sum.is-off { color:#d9483b; }
.cm-lab-note { margin:0 0 12px; color:var(--tn-muted); font-size:13px; }
.cm-lab-slider { display:block; margin:0 0 10px; color:var(--tn-text); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; }
.cm-lab-slider output { float:right; color:var(--tn-muted); font-family:Consolas, Menlo, monospace; text-transform:none; }
.cm-lab-slider input { display:block; width:100%; margin-top:4px; accent-color:var(--tn-select); }
.cm-lab-presets { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 12px; }
html:root .cm-lab button { padding:6px 10px; border:1px solid var(--tn-line); border-radius:7px; background:var(--tn-card); color:var(--tn-text); font-size:12px; cursor:pointer; transition:box-shadow 150ms ease; }
html:root .cm-lab button:hover, html:root .cm-lab button:focus-visible { box-shadow:0 0 0 2px var(--tn-select); }
html:root .cm-lab button.cm-copy { width:100%; border-color:transparent; background:var(--tn-select); color:#151515; font-weight:bold; }

@media only screen and (max-width: 900px) {
	.cm-example, .cm-lab { grid-template-columns:minmax(0, 1fr); }
	.cm-lab { padding:12px; }
}
@media only screen and (max-width: 420px) {
	.cm-matrix { border-spacing:3px; font-size:12px; }
	.cm-matrix td { min-width:0; padding:7px 5px; }
	html:root .cm-lab-grid input { width:52px; }
}
.cm-series { padding:10px 14px; border:1px dashed var(--tn-line); border-radius:10px; color:var(--tn-muted); font-size:13px; }
html:root .cm-matrix { display:table; width:auto; }
html:root .cm-matrix tbody { display:table-row-group; }
html:root .cm-matrix tr { display:table-row; }
html:root .cm-matrix th, html:root .cm-matrix td { display:table-cell; float:none; width:auto; }
@media only screen and (max-width: 480px) {
	html:root .cm-matrix { display:block; max-width:100%; overflow-x:auto; }
	html:root .ng-article article blockquote { padding-left:12px; padding-right:8px; }
}

/*------ Convolve tutorial: figure rows and the Deconvolution Lab ------*/
.cv-figs { clear:both; display:grid; gap:14px; margin:14px 0 22px; }
.cv-figs--2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.cv-figs--3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.cv-figs--4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.cv-figs figure { margin:0; }
.ng-article article .cv-figs img { display:block; width:100%; height:auto; }
.cv-figs figcaption, .cv-lab-kernels figcaption { margin-top:6px; color:var(--tn-muted); font-size:12px; line-height:1.4; text-align:center; }
.cv-lab-view canvas { display:block; width:100%; height:auto; }
.cv-lab-busy { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); padding:3px 10px; border-radius:4px; background:rgba(17,18,20,0.75); color:#fff; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; pointer-events:none; }
.cv-lab-label { display:block; margin-bottom:2px; color:var(--tn-text); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; }
.cv-lab-check { display:flex; align-items:center; gap:8px; margin:0 0 6px; color:var(--tn-text); font-size:13px; }
.cv-lab-check input { accent-color:var(--tn-select); }
.cv-lab hr { margin:10px 0 12px; border:0; border-top:1px solid var(--tn-line); }
html:root .cv-lab button[aria-pressed="true"] { border-color:transparent; background:var(--tn-select); color:#151515; }
.cv-lab-kernels { display:flex; gap:14px; }
.cv-lab-kernels figure { margin:0; }
.cv-lab-kernels canvas { display:block; width:96px; height:96px; border-radius:6px; background:#000; image-rendering:pixelated; }
@media only screen and (max-width: 700px) {
	.cv-figs--3, .cv-figs--4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
html:root .ng-article article pre { max-width:100%; overflow-x:auto; }

/*------ Convolution Matrix tutorial ------*/
.ng-article article .cv-formula-img { display:block; width:auto; max-width:min(100%, 520px); margin:10px 0 16px; background:#fff; padding:8px; }
.ng-article article .km-original { display:block; max-width:min(100%, 420px); margin:0 0 20px; }
.km-lab-view canvas { display:block; width:100%; height:auto; }
.km-grid { margin-bottom:8px; }
html:root .km-grid input { width:72px; }
.ng-article article h4[id] { clear:both; margin:34px 0 14px; font-size:15px; letter-spacing:0.08em; text-transform:uppercase; }
.ng-article .cm-example + p, .ng-article .cv-figs + .cm-matrix { clear:both; }

/*------ Transform Matrix tutorial ------*/
.tm-frame { position:relative; overflow:hidden; aspect-ratio:16 / 9; margin-bottom:12px; border-radius:8px; background:#111 repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,0.06) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,0.06) 39px 40px); }
.ng-article article .tm-frame img { position:absolute; left:0; bottom:0; width:100%; height:100%; max-width:none; border-radius:0; transform-origin:0 100%; opacity:0.92; pointer-events:none; }
.tm-frame-edge { position:absolute; inset:0; border:2px dashed rgba(242,182,50,0.8); border-radius:8px; pointer-events:none; }
.tm-origin { position:absolute; left:6px; bottom:4px; color:var(--tn-select); font:11px Consolas, Menlo, monospace; pointer-events:none; }
.tm-out { margin:0 auto; }
.tm-out td { min-width:64px; }
.tm-lab .cm-values { margin-top:6px; }
.ng-article .tm-matrix { margin:8px auto 12px; }

/*------ TCL page: snippet filter and cards ------*/
.tcl-tools { position:sticky; top:70px; z-index:5; margin:10px 0 6px; padding:10px 12px; border:1px solid var(--tn-line); border-radius:12px; background:var(--tn-card); box-shadow:0 10px 24px -20px rgba(0,0,0,0.6); }
html:root .tcl-search { display:flex; align-items:center; gap:10px; margin:0; }
.tcl-search-label { color:var(--tn-muted); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; }
html:root .tcl-search input { flex:1; min-width:0; margin:0; padding:9px 12px; border:1px solid var(--tn-line); border-radius:8px; background:var(--tn-bg); color:var(--tn-text); font:14px Consolas, Menlo, monospace; }
html:root .tcl-search input:focus { outline:2px solid var(--tn-select); }
.tcl-tools .cm-small { margin:6px 0 0; }
.tcl-snip { position:relative; margin:0 0 14px; }
.tcl-snip > p { margin:0 0 6px; font-size:14px; }
.ng-article article .tcl-snip pre[class*="language-"] { margin:0; padding-right:70px; }
html:root .tcl-copy { position:absolute; right:8px; bottom:8px; padding:4px 10px; border:1px solid rgba(255,255,255,0.18); border-radius:6px; background:rgba(255,255,255,0.08); color:#e6e6e6; font-size:11px; cursor:pointer; }
html:root .tcl-copy:hover { background:var(--tn-select); color:#151515; }
.tcl-sec h3 { scroll-margin-top:150px; }
.tcl-tools, .tcl-sec { clear:both; }
html:root .tcl-search { width:100%; }

/*------ 3D Matrices tutorial ------*/
.m3-anatomy { margin:10px 0 16px; }
.m3-anatomy th { text-align:center; }
.cm-matrix td.m3-r { box-shadow:inset 0 -3px 0 rgba(242,182,50,0.6); }
.cm-matrix td.m3-t { box-shadow:inset 0 -3px 0 rgba(62,123,250,0.75); }
.m3-canvas { display:block; width:100%; height:auto; margin-bottom:12px; border-radius:8px; background:#1c1d20; }
.m3-out { margin:0 auto; }
.m3-out td { min-width:62px; }
.m3-selects { display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 8px; }
.m3-selects label { flex:1; min-width:130px; color:var(--tn-text); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; }
html:root .m3-selects select { display:block; width:100%; margin-top:4px; padding:6px 8px; border:1px solid var(--tn-line); border-radius:7px; background:var(--tn-card); color:var(--tn-text); font:13px Consolas, Menlo, monospace; }
html:root .ng-article article pre:not([class*="language-"]) { margin:10px 0 18px; padding:14px 16px; border-radius:10px; background:var(--tn-panel); color:var(--tn-panel-text); font:12.5px/1.55 Consolas, Menlo, "Courier New", monospace; text-align:left; white-space:pre; }
html:root .ng-article article pre:not([class*="language-"]) code { font:inherit; color:inherit; background:none; text-align:left; }
.nk-snip { margin:0 0 18px; }
.nk-snip > p { margin:0 0 6px; }
html:root .ng-article button.cm-copy { display:block; width:100%; margin:0 0 12px; padding:8px 12px; border:0; border-radius:8px; background:var(--tn-select); color:#151515; font-size:12px; font-weight:bold; cursor:pointer; }
html:root .ng-article .nk-snip textarea.cm-snippet { margin-bottom:6px; }

/*------ Morphology, CornerPin & Homography, BlinkScript Matrices ------*/
.mo-view canvas { display:block; width:100%; height:auto; }
.ng-article .mo-table { margin:10px 0 16px; }
.ng-article .mo-table td, .ng-article .mo-table th { font-family:inherit; font-size:13px; text-align:left; min-width:0; }
.hg-frame { position:relative; aspect-ratio:16 / 9; margin:14px 0 14px; border-radius:8px; background:#111 repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,0.06) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,0.06) 39px 40px); outline:2px dashed rgba(242,182,50,0.6); touch-action:none; user-select:none; -webkit-user-select:none; }
.hg-quad { position:absolute; left:0; top:0; width:100%; height:100%; transform-origin:0 0; pointer-events:none; }
.ng-article article .hg-quad img { display:block; width:100%; height:100%; max-width:none; border-radius:0; opacity:0.95; }
.hg-handle { position:absolute; z-index:2; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:var(--tn-select); color:#151515; font:bold 12px/28px sans-serif; text-align:center; cursor:grab; box-shadow:0 0 0 3px rgba(0,0,0,0.45); touch-action:none; }
.hg-handle:active { cursor:grabbing; }
.cm-matrix td.hg-p { box-shadow:inset 0 -3px 0 rgba(194,69,122,0.85); }
.hg-out { margin:0 auto; }
.hg-out td { min-width:86px; }
.hg-tables figure { text-align:center; }
.hg-tables .cm-matrix { margin:0 auto 6px; }
.bl-lab { grid-template-columns:minmax(0, 1fr); }
html:root .ng-article textarea.bl-in { display:block; width:100%; margin:4px 0 8px; padding:10px 12px; border:1px solid var(--tn-line); border-radius:8px; background:var(--tn-card); color:var(--tn-text); font:13px/1.5 Consolas, Menlo, monospace; resize:vertical; }
.bl-table { margin:8px auto 4px; }
.bl-code { margin:8px 0 18px; }
.bl-code pre { margin-bottom:6px !important; }

/*------ Math in Nuke series ------*/
.mt-series { border-color:rgba(242,182,50,0.5); }
.mg-view canvas, .gd-view canvas, .cc-view canvas, .hu-view canvas { display:block; width:100%; height:auto; }
.hu-view { cursor:crosshair; }
.cc-ranges { margin-top:12px; }
.gd-plot, .ll-plot, .vc-canvas, .tg-canvas, .ex-plot, .cc-ranges { display:block; width:100%; height:auto; margin-bottom:12px; border-radius:8px; background:#1c1d20; }
.vc-canvas { cursor:crosshair; touch-action:none; }
.tg-canvas { cursor:grab; touch-action:none; }
.ll-strip { display:block; width:100%; height:auto; margin:6px 0 4px; border-radius:6px; }
.ll-stripwrap { margin:10px 0 18px; }
html:root .ng-article .vc-out { margin:4px 0 10px; padding:10px 12px; border-radius:8px; background:var(--tn-card); color:var(--tn-text); font:12px/1.6 Consolas, Menlo, monospace; white-space:pre-wrap; text-align:left; }
.tg-out { margin:0 0 10px; color:var(--tn-text); font:12.5px/1.7 Consolas, Menlo, monospace; }
.mt-formula { min-height:1.4em; color:var(--tn-text); }
.ng-article .mt-table td:nth-child(2), .ng-article .mt-table td:nth-child(4) { font-family:Consolas, Menlo, monospace; }
.ll-table th { text-transform:none; }
html:root .ng-article .ng-file-note { position:absolute; left:12px; right:12px; bottom:12px; z-index:3; margin:0; padding:10px 12px; border-radius:6px; background:rgba(0,0,0,0.78); color:#fff; font:13px/1.5 Consolas, Menlo, monospace; text-align:left; }
.ky-view canvas, .dp-view canvas { display:block; width:100%; height:auto; }
.ky-screen { align-items:center; }
.ky-swatch { display:inline-block; width:34px; height:24px; margin-left:8px; border-radius:5px; border:1px solid var(--tn-line); vertical-align:middle; }
.ky-view.is-picking { cursor:crosshair; }
.cm-lab-presets button:disabled { opacity:0.4; cursor:default; }
.cm-lab [hidden] { display:none !important; }
.mt-fig { clear:both; margin:18px auto 24px; max-width:680px; text-align:center; }
.mt-fig svg { display:block; width:100%; height:auto; color:var(--tn-text); }
html:root .ng-article .mt-fig figcaption { margin-top:6px; font-size:13px; line-height:1.5; color:var(--tn-text); opacity:0.8; }
.mm-view canvas { display:block; width:100%; height:auto; }
.mt-chart text { paint-order:stroke; stroke:var(--tn-bg); stroke-width:4px; stroke-linejoin:round; }
.fl-view canvas, .ee-view canvas, .ed-view canvas { display:block; width:100%; height:auto; border-radius:8px; image-rendering:auto; }
.fl-plot { display:block; width:100%; height:auto; margin-top:12px; border-radius:8px; background:#1c1d20; }