/*******************************************************************************
 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; }
/* the image box floats: without a clear the caption block (z-index 3) starts at the top of the card and covers the image, so the image wasn't clickable */
html:root .ng-gallery .grid-item, html:root .gallery-items .grid-item, html:root .students-grid .grid-item { clear:both; }
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; }

/* ---------- One <h1> per page (SEO), looking exactly like the <h2> it replaced ---------- */
h1.ng-h1 { font-size:3.2em; font-weight:300; text-transform:none; line-height:normal; letter-spacing:normal; margin:0; }
.parallax-section h1.ng-h1 { color:#fff; font-size:42px; }
.custom-inner h1.ng-h1 { color:#fff; text-align:left; }
/* home: the two name lines, styled as the old <h4>s */
.slide-title h1.ng-home-h1 { margin:0; font-size:inherit; line-height:normal; text-transform:none; }
.slide-title h1.ng-home-h1 span { display:block; font-size:14px; font-weight:200; text-transform:uppercase; letter-spacing:2px; margin:6px 0 10px; color:#fff; }
@media only screen and (max-width: 1036px) { .slide-title h1.ng-home-h1 span { font-size:12px; } }
/* project pages: the name of the project above Detail / Info */
html:root .fix-box .project-box h1.ng-project-h1 { float:left; width:100%; margin:0 0 14px; font-family:'FuturaPT-Book', sans-serif; font-size:26px; font-weight:300; line-height:1.25; letter-spacing:0; text-transform:none; text-align:left; color:#fff; }
/* a section title that used to be a second <h1>: same look, h2 in the outline */
h2.ng-as-h1 { font-size:4.46666666667em; font-weight:400; text-transform:uppercase; line-height:1.17em; letter-spacing:normal; margin:0; }
/* GIFs replaced by looping MP4s: same box as the image they replaced */
video.ng-gifvid { display:block; position:static; min-width:0; min-height:0; max-width:100%; height:auto; margin:0 auto; background:transparent; }
.tn-thumb video.ng-gifvid { width:100%; height:100%; object-fit:cover; transition:transform 400ms ease; }
.tn-node:hover .tn-thumb video.ng-gifvid { transform:scale(1.04); }
/* "Read also" box on the most visited tutorials, pointing to the Math in Nuke series */
html:root .ng-readalso { display:block; margin:18px 0 28px; padding:16px 20px; border-radius:10px; background:var(--tn-card, #fff); border:1px solid var(--tn-line, #e2e2e2); border-left:4px solid var(--c-color, #f2b632); text-align:left; }
html:root .ng-readalso-k { display:block; margin-bottom:6px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--tn-muted, #888); }
html:root .ng-readalso p { margin:0 0 8px; }
html:root .ng-readalso ul { margin:0; padding:0; list-style:none; }
html:root .ng-readalso li { margin:5px 0; line-height:1.5; }
html:root .ng-readalso li a { font-weight:600; text-decoration:underline; }
html:root .ng-readalso li span { color:var(--tn-muted, #888); }

/* ---------- About / Mentorship: big numbers, award badges, career line ---------- */
html:root .ng-glance, html:root .ng-career { position:relative; z-index:2; float:left; width:100%; clear:both; padding:70px 0 40px; background-color:var(--tn-bg); background-image:radial-gradient(var(--tn-dot) 1px, transparent 1.4px); background-size:22px 22px; }
html:root .ng-career { padding-top:30px; }
html:root .ng-glance h2, html:root .ng-career h2 { color:var(--tn-text); }
.ng-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; margin:34px 0 0; padding:0; list-style:none; }
.ng-stats li { position:relative; padding:26px 18px 22px; border-radius:12px; background:var(--tn-card); border:1px solid var(--tn-line); box-shadow:0 6px 20px rgba(0,0,0,0.06); text-align:center; overflow:hidden; }
.ng-stats li:before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--c); }
html:root .ng-stats b { display:block; font-family:"FuturaPT-Book", sans-serif; font-weight:300; font-size:clamp(48px, 6vw, 84px); line-height:1; color:var(--c); letter-spacing:-1px; font-variant-numeric:tabular-nums; }
html:root .ng-stats span { display:block; margin-top:10px; font-size:14px; line-height:1.4; color:var(--tn-muted); letter-spacing:0.5px; }
.ng-awards { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:26px 0 0; padding:0; list-style:none; }
.ng-awards li { display:flex; flex-direction:column; align-items:center; min-width:170px; padding:14px 18px 12px; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); border-top:3px solid #c9a227; transition:transform 250ms ease, box-shadow 250ms ease; }
.ng-awards li:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(201,162,39,0.25); }
html:root .ng-awards b { font-size:18px; letter-spacing:1px; color:#b8901a; font-family:"futurastd-bold", sans-serif; }
html[data-theme="dark"] .ng-awards b { color:#e2bd47; }
html:root .ng-awards span { margin-top:3px; font-size:12px; color:var(--tn-muted); }
html:root .ng-awards em { margin-top:4px; font-size:13px; font-style:italic; color:var(--tn-text); }
html:root .ng-glance-note { max-width:760px; margin:22px auto 0; font-size:13px; line-height:1.6; color:var(--tn-muted); text-align:center; }
html:root .ng-glance-note--big { font-size:16px; color:var(--tn-text); }
html:root .ng-career-lead { margin:20px auto 0; color:var(--tn-muted); text-align:center; }

/* the career line: a metro map that draws itself, stations pop in one after the other */
.ng-metro { position:relative; width:100%; overflow-x:auto; overflow-y:hidden; cursor:grab; padding:26px 0 18px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.ng-metro.is-drag { cursor:grabbing; user-select:none; }
.ng-metro-track { position:relative; display:flex; width:max-content; margin:0; padding:0 60px; list-style:none; }
.ng-metro-track:before { content:""; position:absolute; left:60px; right:60px; top:55px; height:8px; border-radius:4px; background:linear-gradient(90deg, var(--c-color), var(--c-free) 45%, var(--c-python) 75%, var(--c-color)); transform:scaleX(0); transform-origin:left center; transition:transform 2.6s cubic-bezier(.25,.7,.2,1); }
.ng-metro.is-in .ng-metro-track:before { transform:scaleX(1); }
.ng-metro-track li { position:relative; flex:0 0 150px; width:150px; padding:0 8px; text-align:center; opacity:0; transform:translateY(12px); transition:opacity 500ms ease, transform 500ms ease; transition-delay:calc(var(--i) * 115ms); }
.ng-metro.is-in .ng-metro-track li { opacity:1; transform:none; }
html:root .ng-metro-y { display:block; height:22px; font-size:12px; letter-spacing:2px; color:var(--tn-muted); }
.ng-metro-dot { position:relative; z-index:1; display:block; width:22px; height:22px; margin:26px auto 12px; border-radius:50%; background:var(--tn-card); border:5px solid var(--c-color); box-sizing:border-box; transition:transform 200ms ease; }
.ng-metro-track li:hover .ng-metro-dot { transform:scale(1.35); }
html:root .ng-metro-track b { display:block; font-size:14px; line-height:1.3; color:var(--tn-text); font-family:"futurastd-bold", sans-serif; letter-spacing:0.5px; }
html:root .ng-metro-track em { display:block; margin-top:4px; font-size:12px; line-height:1.35; color:var(--tn-muted); font-style:italic; }
.ng-metro-track li.is-teach .ng-metro-dot { border-color:var(--c-gizmos); }
.ng-metro-track li.is-award .ng-metro-dot { border-color:#c9a227; background:#f6d86b; }
html:root .ng-metro-track li.is-award em:after { content:" \2605"; color:#c9a227; font-style:normal; }
.ng-metro-track li.is-now .ng-metro-dot { border-color:var(--c-3d); background:var(--c-3d); }
.ng-metro-track li.is-now .ng-metro-dot:after { content:""; position:absolute; top:-9px; right:-9px; bottom:-9px; left:-9px; border-radius:50%; border:2px solid var(--c-3d); animation:ngPulse 1.8s ease-out infinite; }
html:root .ng-metro-track li.is-now em { color:var(--c-3d); font-style:normal; font-weight:bold; letter-spacing:2px; text-transform:uppercase; }
@keyframes ngPulse { 0% { transform:scale(0.6); opacity:0.9; } 100% { transform:scale(1.6); opacity:0; } }
.ng-metro-key { display:flex; justify-content:center; flex-wrap:wrap; gap:22px; margin:6px auto 0; padding:0; list-style:none; font-size:12px; color:var(--tn-muted); }
.ng-metro-key i { display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-1px; border-radius:50%; border:3px solid var(--c-color); box-sizing:border-box; }
.ng-metro-key i.k-teach { border-color:var(--c-gizmos); }
.ng-metro-key i.k-award { border-color:#c9a227; background:#f6d86b; }
@media (max-width: 900px) { .ng-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ng-stats { gap:10px; } .ng-stats li { padding:20px 10px 16px; } .ng-awards li { min-width:0; flex:1 1 140px; } }
@media (prefers-reduced-motion: reduce) {
	.ng-metro-track:before, .ng-metro-track li { transition:none; }
	.ng-metro-track li.is-now .ng-metro-dot:after { animation:none; }
}

/* featured award: the one for compositing, with a light sweep */
.ng-award-feature { position:relative; display:flex; flex-direction:column; align-items:center; max-width:560px; margin:30px auto 0; padding:22px 26px 18px; border-radius:14px; text-align:center; overflow:hidden;
	background:linear-gradient(135deg, #2b2410, #4a3a10 55%, #2b2410); border:1px solid #c9a227; box-shadow:0 12px 34px rgba(201,162,39,0.28); }
.ng-award-feature:after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg, transparent, rgba(255,240,190,0.35), transparent); transform:skewX(-20deg); animation:ngSweep 4.5s ease-in-out infinite; }
@keyframes ngSweep { 0%, 55% { left:-60%; } 100% { left:130%; } }
html:root .ng-award-feature b { font-family:"futurastd-bold", sans-serif; font-size:30px; letter-spacing:2px; color:#f6d86b; }
html:root .ng-award-feature span { margin-top:6px; font-size:14px; color:#f3e7c0; letter-spacing:0.5px; }
html:root .ng-award-feature em { margin-top:6px; font-size:16px; font-style:italic; color:#fff; }
html:root .ng-award-feature .ng-award-tag { margin:0 0 10px; padding:4px 12px; border-radius:20px; background:#c9a227; color:#1d1704; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-family:"futurastd-bold", sans-serif; }
.ng-awards li.is-nom { border-top-color:#a8adb7; }
html:root .ng-awards li.is-nom b { color:#7d838f; }
html[data-theme="dark"] .ng-awards li.is-nom b { color:#c3c7cf; }
.ng-metro-track li.is-nom .ng-metro-dot { border-color:#a8adb7; background:#e3e6ea; }
html:root .ng-metro-track li.is-nom em:after { content:" \2606"; color:#8b919c; font-style:normal; }
.ng-metro-key i.k-nom { border-color:#a8adb7; background:#e3e6ea; }

/* Who am I / How I can help: node cards that tilt towards the mouse */
html:root .ng-who, html:root .ng-toolbox { position:relative; z-index:2; float:left; width:100%; clear:both; padding:60px 0 50px; background-color:var(--tn-bg); background-image:radial-gradient(var(--tn-dot) 1px, transparent 1.4px); background-size:22px 22px; }
html:root .ng-who h2, html:root .ng-toolbox h2 { color:var(--tn-text); }
.ng-who-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; margin:34px 0 0; padding:0; list-style:none; perspective:900px; }
.ng-who-grid li { position:relative; padding:24px 22px 20px; border-radius:12px; background:var(--tn-card); border:1px solid var(--tn-line); box-shadow:0 6px 20px rgba(0,0,0,0.06); text-align:left; transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; transform-style:preserve-3d; }
.ng-who-grid li:before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:12px 0 0 12px; background:var(--c); }
.ng-who-grid li:hover { border-color:var(--tn-select); box-shadow:0 14px 34px rgba(0,0,0,0.12); }
html:root .ng-who-grid i { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--c); color:#fff; font-size:19px; }
html:root .ng-who-grid h4 { margin:14px 0 8px; font-size:16px; font-weight:bold; letter-spacing:0.5px; color:var(--tn-text); text-transform:none; text-align:left; }
html:root .ng-who-grid p { margin:0; font-size:14px; line-height:1.55; color:var(--tn-muted); text-align:left; }
html:root .ng-who-grid p a { color:var(--tn-text); text-decoration:underline; }

/* Toolbox: categories as Nuke backdrops, tools as nodes with a postage stamp */
.ng-tools { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; margin-top:34px; }
.ng-bd { position:relative; padding:38px 14px 14px; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); background:color-mix(in srgb, var(--c) 13%, var(--tn-card)); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.ng-bd--wide { grid-column:span 2; }
.ng-bd-k { position:absolute; left:0; right:0; top:0; padding:7px 14px; border-radius:9px 9px 0 0; background:var(--c); color:#fff; font-size:12px; letter-spacing:2px; text-transform:uppercase; font-family:"futurastd-bold", sans-serif; text-align:left; }
.ng-bd ul { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.ng-bd li { display:flex; flex-direction:column; align-items:center; width:84px; padding:7px 6px 6px; border-radius:7px; background:var(--tn-card); border:1px solid var(--tn-line); box-shadow:0 3px 8px rgba(0,0,0,0.06); opacity:0; transform:translateY(10px) scale(0.96); transition:opacity 420ms ease, transform 420ms ease, border-color 150ms ease; transition-delay:calc(var(--k, 0) * 40ms); }
.ng-toolbox.is-in .ng-bd li { opacity:1; transform:none; }
.ng-bd li:hover { border-color:var(--tn-select); box-shadow:0 0 0 2px var(--tn-select); transition-delay:0s; }
.ng-bd li img { display:block; width:46px; height:46px; border-radius:6px; background:#fff; object-fit:contain; }
.ng-bd li.ng-mono i { display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:6px; background:var(--m); color:#fff; font-style:normal; font-family:"futurastd-bold", sans-serif; font-size:15px; letter-spacing:0.5px; }
html:root .ng-bd li span { margin-top:6px; font-size:11px; line-height:1.2; color:var(--tn-text); text-align:center; }
@media (max-width: 991px) { .ng-who-grid, .ng-tools { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ng-who-grid, .ng-tools { grid-template-columns:minmax(0, 1fr); } .ng-bd--wide { grid-column:auto; } .ng-bd li { width:74px; } }
@media (prefers-reduced-motion: reduce) { .ng-award-feature:after { animation:none; } .ng-bd li { transition:none; opacity:1; transform:none; } }
html:root .ng-award-feature small { position:relative; z-index:1; display:block; max-width:430px; margin-top:10px; font-size:12px; line-height:1.5; color:#d9cfae; }
.ng-stats--5 { grid-template-columns:repeat(5, minmax(0, 1fr)); }
@media (max-width: 991px) { .ng-stats--5 { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ng-stats--5 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
html:root .ng-awards small { margin-top:5px; font-size:11px; line-height:1.3; color:var(--tn-muted); font-style:normal; }

/* ---------- Contact without forms: buttons, call-to-action band, question box, recommendations ---------- */
html:root .ng-cta-band, html:root .ng-ask, html:root .ng-quotes { position:relative; z-index:2; float:left; width:100%; clear:both; padding:60px 0; background-color:var(--tn-bg); background-image:radial-gradient(var(--tn-dot) 1px, transparent 1.4px); background-size:22px 22px; }
html:root .ng-cta-box, html:root .ng-ask-box { position:relative; max-width:860px; margin:0 auto; padding:40px 30px 36px; border-radius:14px; background:var(--tn-panel); color:var(--tn-panel-text); text-align:center; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,0.18); }
html:root .ng-cta-box:before, html:root .ng-ask-box:before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg, var(--c-color), var(--c-python), var(--c-gizmos), var(--c-3d), var(--tn-select)); background-size:200% 100%; animation:ngFlow 6s linear infinite; }
@keyframes ngFlow { 0% { background-position:0 0; } 100% { background-position:200% 0; } }
html:root .ng-cta-box h2, html:root .ng-ask-box h2 { margin:0 0 12px; color:#fff; font-size:34px; }
html:root .ng-ask-box h2 { font-size:28px; }
html:root .ng-cta-box p, html:root .ng-ask-box p { max-width:600px; margin:0 auto 24px; color:var(--tn-panel-text); text-align:center; }
.ng-cta-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
html:root a.ng-btn { display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:30px; background:var(--tn-select); color:#1d1704; font-size:13px; letter-spacing:2px; text-transform:uppercase; font-family:"futurastd-bold", sans-serif; text-decoration:none; transition:transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
html:root a.ng-btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(242,182,50,0.35); color:#1d1704; }
html:root a.ng-btn--ghost { background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,0.55); }
html:root a.ng-btn--ghost:hover { background:rgba(255,255,255,0.08); color:#fff; box-shadow:inset 0 0 0 2px #fff; }
html:root .ng-ask-note { margin:16px 0 0; font-size:12px; color:#9a9ba2; }

/* recommendations from supervisors and leads */
html:root .ng-quotes h2 { color:var(--tn-text); }
.ng-quote-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; margin:34px 0 0; padding:0; list-style:none; }
.ng-quote-grid li { position:relative; display:flex; flex-direction:column; padding:30px 24px 22px; border-radius:12px; background:var(--tn-card); border:1px solid var(--tn-line); box-shadow:0 6px 20px rgba(0,0,0,0.06); text-align:left; opacity:0; transform:translateY(16px); transition:opacity 600ms ease, transform 600ms ease, border-color 180ms ease; transition-delay:calc(var(--k, 0) * 160ms); }
.ng-quotes.is-in .ng-quote-grid li { opacity:1; transform:none; }
.ng-quote-grid li:hover { border-color:var(--tn-select); }
.ng-quote-grid li:before { content:"\201C"; position:absolute; top:-6px; left:16px; font-family:Georgia, serif; font-size:84px; line-height:1; color:var(--tn-select); opacity:0.85; }
html:root .ng-quote-grid blockquote { flex:1; margin:14px 0 18px; padding:0; border:0; font-size:15px; line-height:1.6; font-style:italic; color:var(--tn-text); }
html:root .ng-quote-grid blockquote p { margin:0; color:var(--tn-text); text-align:left; }
html:root .ng-quote-grid .ng-check { margin:0; padding:0; list-style:none; }
html:root .ng-quote-grid .ng-check li { all:unset; display:block; font-style:normal; font-size:14px; line-height:1.7; color:var(--tn-text); }
html:root .ng-quote-grid .ng-check li:before { all:unset; content:"\2713  "; color:var(--c-color); font-weight:bold; }
html:root .ng-quote-grid b { display:block; font-size:15px; color:var(--tn-text); font-family:"futurastd-bold", sans-serif; letter-spacing:0.5px; }
html:root .ng-quote-grid span { display:block; margin-top:3px; font-size:12px; color:var(--tn-muted); }
html:root .ng-quotes-more { margin:22px 0 0; text-align:center; font-size:13px; }
html:root .ng-quotes-more a { color:var(--tn-text); text-decoration:underline; }
@media (max-width: 991px) { .ng-quote-grid { grid-template-columns:minmax(0, 1fr); } }
@media (max-width: 600px) { html:root .ng-cta-box h2 { font-size:26px; } html:root .ng-cta-box, html:root .ng-ask-box { padding:32px 18px 28px; } }
@media (prefers-reduced-motion: reduce) { html:root .ng-cta-box:before, html:root .ng-ask-box:before { animation:none; } .ng-quote-grid li { opacity:1; transform:none; transition:none; } }

/* ---------- Clearer separation between the About / Mentorship sections: more air, a Nuke-style pipe
   between them, and alternate bands slightly lighter ---------- */
html:root .ng-glance, html:root .ng-career, html:root .ng-who, html:root .ng-toolbox, html:root .ng-quotes, html:root .ng-cta-band { padding-top:96px; padding-bottom:84px; }
html:root .ng-glance:before, html:root .ng-career:before, html:root .ng-who:before, html:root .ng-toolbox:before, html:root .ng-quotes:before, html:root .ng-cta-band:before {
	content:""; position:absolute; top:0; left:50%; width:2px; height:52px; margin-left:-1px; background:linear-gradient(var(--tn-line), var(--tn-select)); }
html:root .ng-glance:after, html:root .ng-career:after, html:root .ng-who:after, html:root .ng-toolbox:after, html:root .ng-quotes:after, html:root .ng-cta-band:after {
	content:""; position:absolute; top:48px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--tn-select); box-shadow:0 0 0 4px var(--tn-bg); }
html:root .ng-career, html:root .ng-toolbox, html:root .ng-cta-band { background-color:var(--tn-card); background-image:none; border-top:1px solid var(--tn-line); border-bottom:1px solid var(--tn-line); }
html:root .ng-career:after, html:root .ng-toolbox:after, html:root .ng-cta-band:after { box-shadow:0 0 0 4px var(--tn-card); }
html[data-theme="dark"] .ng-career, html[data-theme="dark"] .ng-toolbox, html[data-theme="dark"] .ng-cta-band { background-color:#1e1f23; }
html[data-theme="dark"] .ng-career:after, html[data-theme="dark"] .ng-toolbox:after, html[data-theme="dark"] .ng-cta-band:after { box-shadow:0 0 0 4px #1e1f23; }

/* ---- VFX portfolio guide ---- */
html:root .ng-article .pg-lead { font-size:17px; line-height:1.75; }
html:root .ng-article .pg-table td:first-child { white-space:nowrap; font-weight:bold; }
html:root .ng-article .pg-table td { text-align:left; vertical-align:top; }
.pg-ab { clear:both; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0 24px; }
.pg-ab figure { position:relative; margin:0; border-radius:8px; overflow:hidden; background:#1c1d20; }
.pg-ab img { display:block; width:100%; height:auto; }
html:root .ng-article .pg-ab figcaption { position:absolute; left:10px; top:10px; padding:3px 12px; border-radius:20px; background:rgba(22,23,27,0.85); color:#fff; font-size:12px; letter-spacing:1px; text-transform:uppercase; }
.pg-ab figure:first-child figcaption:before, .pg-ab figure:last-child figcaption:before { content:""; display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--c-python); }
.pg-ab figure:last-child figcaption:before { background:var(--tn-select); }
html:root .ng-article .pg-examples { clear:both; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin:18px 0 22px; padding:0; list-style:none; }
html:root .ng-article .pg-examples li { margin:0; padding:0; list-style:none; }
html:root .ng-article .pg-examples li:before { display:none; }
html:root .ng-article .pg-examples a { display:block; height:100%; padding:10px 10px 14px; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); border-top:4px solid var(--c-free); text-align:left; text-decoration:none; transition:transform 200ms ease, box-shadow 200ms ease; }
html:root .ng-article .pg-examples a:hover { transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(0,0,0,0.5); }
html:root .ng-article .pg-examples img { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; border-radius:6px; margin-bottom:10px; }
html:root .ng-article .pg-examples b { display:block; color:var(--tn-text); font-size:15px; }
html:root .ng-article .pg-examples span { display:block; color:var(--tn-muted); font-size:12px; }
html:root .ng-article .pg-check { clear:both; margin:14px 0 20px; padding:18px 22px; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); border-left:4px solid var(--tn-select); list-style:none; text-align:left; }
html:root .ng-article .pg-check li { position:relative; margin:0; padding:5px 0 5px 30px; list-style:none; line-height:1.6; color:var(--tn-text); }
html:root .ng-article .pg-check li:before { content:"\2713"; position:absolute; left:4px; top:5px; color:var(--c-color); font-weight:bold; }
html:root .ng-article .pg-more { clear:both; margin-top:26px; }
@media only screen and (max-width:640px) {
	.pg-ab, html:root .ng-article .pg-examples { grid-template-columns:minmax(0, 1fr); }
}

/* ---- portfolio intro ---- */
html:root .ng-port-intro { max-width:780px; margin:18px auto 14px; color:var(--tn-text); font-size:16px; line-height:1.75; text-align:center; }
html:root .ng-port-guide { margin:0 auto 34px; text-align:center; }
html:root .ng-port-guide a { display:inline-block; padding:9px 18px; border-radius:30px; background:var(--tn-card); border:1px solid var(--tn-line); color:var(--tn-text); font-size:14px; text-decoration:none; transition:border-color 200ms ease, transform 200ms ease; }
html:root .ng-port-guide a:hover { border-color:var(--tn-select); transform:translateY(-2px); }
html:root .ng-port-guide .fa { margin-right:6px; color:var(--tn-select); }
html:root .ng-article .pg-table td, html:root .ng-article .mt-table.pg-table td:nth-child(2), html:root .ng-article .mt-table.pg-table td:nth-child(4) { font-family:inherit; font-size:14px; line-height:1.55; }
html:root .ng-article .pg-table { font-family:"FuturaPT-Book", sans-serif; }
html:root .ng-article .pg-sub { clear:both; margin:30px 0 12px; font-size:15px; letter-spacing:1px; text-transform:uppercase; color:var(--tn-text); text-align:left; }
.pg-gallery { clear:both; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:18px 0 8px; }
.pg-gallery figure, .pg-steps figure { margin:0; }
.pg-gallery img, .pg-steps img { display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:8px; background:#1c1d20; transition:transform 250ms ease; }
.pg-gallery a { display:block; overflow:hidden; border-radius:8px; }
.pg-gallery a:hover img { transform:scale(1.04); }
html:root .ng-article .pg-gallery figcaption, html:root .ng-article .pg-steps figcaption { margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--tn-text); opacity:0.85; text-align:left; }
.pg-steps { clear:both; position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin:22px 0 8px; counter-reset:step; }
.pg-steps figure { position:relative; }
.pg-steps figure + figure:before { content:"\2192"; position:absolute; left:-12px; top:calc(37.5% - 10px); z-index:2; width:20px; height:20px; border-radius:50%; background:var(--tn-select); color:#18191c; font-size:12px; line-height:20px; text-align:center; font-weight:bold; }
html:root .ng-article .pg-steps figcaption { text-transform:uppercase; letter-spacing:1px; text-align:center; }
html:root .ng-article .pg-voices { clear:both; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin:16px 0 24px; padding:0; list-style:none; }
html:root .ng-article .pg-voices > li { position:relative; margin:0; padding:16px 18px 14px; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); border-top:4px solid var(--c, var(--tn-select)); list-style:none; text-align:left; }
html:root .ng-article .pg-voices > li:before { content:"\201C"; position:absolute; right:14px; top:2px; font:bold 44px/1 Georgia, serif; color:var(--c, var(--tn-select)); opacity:0.35; }
html:root .ng-article .pg-voices .pg-who { display:block; margin-bottom:6px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--tn-muted); padding-right:28px; }
html:root .ng-article .pg-voices p { margin:0 0 8px; font-size:14px; line-height:1.6; color:var(--tn-text); }
html:root .ng-article .pg-voices a { font-size:12.5px; color:var(--tn-text); text-decoration:underline; }
html:root .ng-article .pg-examples--3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
html:root .ng-article .pg-examples em { display:block; margin-top:6px; font-style:normal; font-size:12.5px; line-height:1.5; color:var(--tn-text); opacity:0.85; }
html:root .ng-article .pg-free { clear:both; margin:6px 0 20px; text-align:left; }
@media only screen and (max-width:900px) {
	.pg-gallery, html:root .ng-article .pg-examples--3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.pg-steps { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.pg-steps figure:nth-child(3):before { display:none; }
}
@media only screen and (max-width:640px) {
	html:root .ng-article .pg-voices, html:root .ng-article .pg-examples--3 { grid-template-columns:minmax(0, 1fr); }
}
html:root .ng-article .pg-examples--4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media only screen and (max-width:900px) { html:root .ng-article .pg-examples--4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
html:root .ng-article .pg-voices { grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media only screen and (max-width:1100px) { html:root .ng-article .pg-voices { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media only screen and (max-width:640px) { html:root .ng-article .pg-voices { grid-template-columns:minmax(0, 1fr); } }
/* recruiter cards, v2 */
html:root .ng-article .pg-voices { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin:20px 0 18px; }
html:root .ng-article .pg-voices > li { display:flex; flex-direction:column; padding:18px 20px 16px; }
html:root .ng-article .pg-voices > li:before { content:none; }
html:root .ng-article .pg-voices .pg-tag { align-self:flex-start; margin-bottom:10px; padding:3px 10px; border-radius:20px; background:var(--c, var(--tn-select)); color:#fff; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; }
html:root .ng-article .pg-voices .pg-name { display:block; color:var(--tn-text); font-size:17px; line-height:1.3; }
html:root .ng-article .pg-voices .pg-who { margin:3px 0 10px; padding:0; font-size:12px; letter-spacing:0.3px; text-transform:none; color:var(--tn-muted); }
html:root .ng-article .pg-voices > li > ul { flex:1; margin:0 0 14px; padding:0; list-style:none; }
html:root .ng-article .pg-voices > li > ul > li { position:relative; margin:0; padding:3px 0 3px 22px; list-style:none; font-size:14px; line-height:1.55; color:var(--tn-text); text-align:left; }
html:root .ng-article .pg-voices > li > ul > li:before { content:"\2713"; position:absolute; left:2px; top:3px; color:var(--c, var(--c-color)); font-weight:bold; }
html:root .ng-article .pg-voices a.pg-read { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:30px; border:1px solid var(--tn-line); background:var(--tn-bg); color:var(--tn-text); font-size:12.5px; text-decoration:none; transition:border-color 200ms ease, background 200ms ease; }
html:root .ng-article .pg-voices a.pg-read:hover { border-color:var(--c, var(--tn-select)); background:var(--tn-card); }
html:root .ng-article .pg-voices a.pg-read .fa { font-size:11px; opacity:0.7; }
html:root .ng-article .pg-sources { clear:both; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 14px; padding:14px 16px; border-radius:10px; background:var(--tn-card); border:1px dashed var(--tn-line); text-align:left; }
html:root .ng-article .pg-sources span { margin-right:4px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--tn-muted); }
html:root .ng-article .pg-sources a { padding:4px 12px; border-radius:20px; background:var(--tn-bg); border:1px solid var(--tn-line); color:var(--tn-text); font-size:12.5px; text-decoration:none; }
html:root .ng-article .pg-sources a:hover { border-color:var(--tn-select); }
@media only screen and (max-width:640px) { html:root .ng-article .pg-voices { grid-template-columns:minmax(0, 1fr); } }
/* link cards (plates, studios, reading) */
html:root .ng-article .pg-links { clear:both; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:14px 0 12px; padding:0; list-style:none; }
html:root .ng-article .pg-links > li { margin:0; padding:0; list-style:none; }
html:root .ng-article .pg-links > li:before { content:none; }
html:root .ng-article .pg-links a { position:relative; display:block; height:100%; padding:14px 34px 14px 16px; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); text-align:left; text-decoration:none; transition:border-color 200ms ease, transform 200ms ease; }
html:root .ng-article .pg-links a:after { content:"\2197"; position:absolute; right:14px; top:12px; color:var(--tn-muted); font-size:14px; }
html:root .ng-article .pg-links a:hover { border-color:var(--tn-select); transform:translateY(-2px); }
html:root .ng-article .pg-links b { display:block; margin-bottom:4px; color:var(--tn-text); font-size:14.5px; }
html:root .ng-article .pg-links span { display:block; color:var(--tn-text); opacity:0.8; font-size:12.5px; line-height:1.5; }
@media only screen and (max-width:900px) { html:root .ng-article .pg-links { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media only screen and (max-width:640px) { html:root .ng-article .pg-links { grid-template-columns:minmax(0, 1fr); } }
/* guide: more air between sections, clean labels in the reel chart */
html:root .ng-guide .ng-article article hr, html:root body.ng-guide article hr { margin:64px 0 34px; }
html:root body.ng-guide article .blog-text h3[id] { margin-top:6px; margin-bottom:18px; }
html:root body.ng-guide .mt-chart text { stroke:none; }
/* compositing page: roadmap, books, shelf, video */
html:root .ng-article .pg-video { clear:both; position:relative; margin:18px 0 6px; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:10px; background:#000; }
html:root .ng-article .pg-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
html:root .ng-article .pg-map { clear:both; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin:18px 0 10px; padding:0; list-style:none; }
html:root .ng-article .pg-map > li { margin:0; padding:0; list-style:none; }
html:root .ng-article .pg-map > li:before { content:none; }
html:root .ng-article .pg-map a { position:relative; display:block; height:100%; padding:14px 14px 14px 16px; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); border-top:4px solid var(--c, var(--tn-select)); text-align:left; text-decoration:none; transition:transform 200ms ease, box-shadow 200ms ease; }
html:root .ng-article .pg-map a:hover { transform:translateY(-3px); box-shadow:0 14px 26px -18px rgba(0,0,0,0.5); }
html:root .ng-article .pg-map i { position:absolute; right:12px; top:10px; font-style:normal; font-size:12px; letter-spacing:1px; color:var(--tn-muted); }
html:root .ng-article .pg-map b { display:block; margin-bottom:4px; color:var(--tn-text); font-size:15px; }
html:root .ng-article .pg-map span { display:block; color:var(--tn-text); opacity:0.8; font-size:12.5px; line-height:1.45; }
html:root .ng-article .pg-shelf { clear:both; margin:16px auto 6px; max-width:760px; text-align:center; }
html:root .ng-article .pg-shelf img { display:block; width:100%; height:auto; border-radius:10px; }
html:root .ng-article .pg-shelf figcaption { margin-top:6px; font-size:13px; color:var(--tn-text); opacity:0.8; }
html:root .ng-article .pg-books { clear:both; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:12px 0 10px; padding:0; list-style:none; }
html:root .ng-article .pg-books > li { margin:0; padding:0; list-style:none; }
html:root .ng-article .pg-books > li:before { content:none; }
html:root .ng-article .pg-books a { position:relative; display:block; height:100%; padding:12px 14px 12px 18px; border-radius:8px; background:var(--tn-card); border:1px solid var(--tn-line); border-left:4px solid var(--tn-select); text-align:left; text-decoration:none; transition:border-color 200ms ease; }
html:root .ng-article .pg-books a:hover { border-color:var(--tn-select); }
html:root .ng-article .pg-books b { display:block; color:var(--tn-text); font-size:14px; line-height:1.35; }
html:root .ng-article .pg-books span { display:block; margin:2px 0 4px; color:var(--tn-muted); font-size:12px; }
html:root .ng-article .pg-books em { display:block; font-style:normal; color:var(--tn-text); opacity:0.85; font-size:12.5px; line-height:1.45; }
html:root .ng-article .pg-links--feature { grid-template-columns:minmax(0, 1fr); }
html:root .ng-article .pg-links--feature a { padding:20px 40px 20px 22px; border-left:4px solid var(--tn-select); }
html:root .ng-article .pg-links--feature b { font-size:18px; }
html:root .ng-article .pg-links--feature span { font-size:14px; }
@media only screen and (max-width:900px) { html:root .ng-article .pg-map, html:root .ng-article .pg-books { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media only screen and (max-width:640px) { html:root .ng-article .pg-map, html:root .ng-article .pg-books { grid-template-columns:minmax(0, 1fr); } }
/* compositing page: one colour per topic */
html:root .ng-article .cp-topic { --cat:var(--c); position:relative; }
html:root .ng-article .cp-topic > h3 { display:inline-block; padding:6px 14px 6px 10px; border-radius:8px; background:color-mix(in srgb, var(--c) 14%, transparent); }
html:root .ng-article .cp-topic > h3:before { width:12px; height:12px; border-radius:3px; background:var(--c); }
html:root .ng-article .cp-topic .pg-check { border-left-color:var(--c); background:color-mix(in srgb, var(--c) 6%, var(--tn-card)); }
html:root .ng-article .cp-topic .pg-check li:before { color:var(--c); }
html:root .ng-article .cp-topic .pg-links a { border-top:3px solid var(--c); }
html:root .ng-article .cp-topic .pg-links a:hover { border-color:var(--c); }
html:root .ng-article .cp-topic .pg-links a:after { color:var(--c); }
html:root .ng-article .cp-topic .pg-sources { border-color:color-mix(in srgb, var(--c) 45%, var(--tn-line)); }
html:root .ng-article .cp-topic .pg-sources a { border-left:3px solid var(--c); }
html:root .ng-article .cp-topic .pg-sources a:hover { border-color:var(--c); }
html:root .ng-article .cp-topic .pg-gallery a:hover img { box-shadow:0 0 0 3px var(--c); }
html:root .ng-article .cp-topic .pg-ab figcaption:before, html:root .ng-article .cp-topic .pg-ab figure:last-child figcaption:before { background:var(--c); }
html:root .ng-article .cp-topic .pg-sub { color:var(--tn-text); }
html:root .ng-article .cp-topic > h3 { display:table; margin-left:0; margin-right:auto; text-align:left; }
/* small book covers, channel avatars and site icons */
html:root .ng-article .pg-books a.has-cover { padding-left:70px; min-height:86px; }
html:root .ng-article .pg-books .pg-cover { position:absolute; left:14px; top:12px; width:44px; height:64px; object-fit:cover; border-radius:3px; box-shadow:0 4px 10px -4px rgba(0,0,0,0.55); background:#22242a; }
html:root .ng-article .pg-books .pg-cover--blank { display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg, var(--tn-select), #d9853b); color:#18191c; font-weight:bold; font-size:14px; letter-spacing:1px; }
html:root .ng-article .pg-links a.has-logo { padding-left:60px; }
html:root .ng-article .pg-links .pg-logo { position:absolute; left:14px; top:14px; width:34px; height:34px; border-radius:8px; object-fit:contain; background:#fff; padding:3px; box-shadow:0 0 0 1px var(--tn-line); }
html:root .ng-article .pg-links .pg-logo--round { border-radius:50%; padding:0; object-fit:cover; background:#22242a; }
html:root .ng-article .pg-links--feature a.has-logo { padding-left:70px; }
html:root .ng-article .pg-links--feature .pg-logo { width:40px; height:40px; top:20px; left:18px; }
/* compositing page: cheat sheet figure, maths grid */
html:root .ng-article .pg-cheat { clear:both; float:right; width:240px; margin:4px 0 16px 22px; text-align:left; }
html:root .ng-article .pg-cheat img { display:block; width:100%; height:auto; border-radius:8px; border:1px solid var(--tn-line); background:#fff; }
html:root .ng-article .pg-cheat figcaption { margin-top:6px; font-size:12px; line-height:1.45; color:var(--tn-text); opacity:0.85; }
html:root .ng-article .cp-topic .pg-examples a { border-top-color:var(--c); }
html:root .ng-article .pg-mathgrid img { aspect-ratio:16 / 9; }
html:root .ng-article .pg-mathgrid em { font-size:12px; }
@media only screen and (max-width:640px) { html:root .ng-article .pg-cheat { float:none; width:100%; margin:10px 0 16px; } }
/* compositing page v3: tracking types, logo row, glossary, diagrams */
html:root .ng-article .pg-types { clear:both; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:16px 0 14px; padding:0; list-style:none; }
html:root .ng-article .pg-types > li { margin:0; padding:16px 18px; list-style:none; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); border-top:4px solid var(--k, var(--c)); text-align:left; }
html:root .ng-article .pg-types > li:before { content:none; }
html:root .ng-article .pg-types b { display:block; margin-bottom:6px; color:var(--tn-text); font-size:16px; }
html:root .ng-article .pg-types p { margin:0 0 10px; font-size:13.5px; line-height:1.6; color:var(--tn-text); }
html:root .ng-article .pg-types span { display:block; font-size:12px; color:var(--tn-muted); }
html:root .ng-article .pg-types span a { color:var(--tn-text); text-decoration:underline; }
html:root .ng-article .pg-logos { clear:both; display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 16px; }
html:root .ng-article .pg-logos span { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; border-radius:30px; background:var(--tn-card); border:1px solid var(--tn-line); font-size:13px; color:var(--tn-text); }
html:root .ng-article .pg-logos img { width:28px; height:28px; object-fit:contain; border-radius:6px; background:#fff; padding:2px; }
html:root .ng-article .pg-gloss { clear:both; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:14px 0 18px; text-align:left; }
html:root .ng-article .pg-gloss > div { padding:12px 14px; border-radius:8px; background:var(--tn-card); border:1px solid var(--tn-line); border-left:3px solid var(--c, var(--tn-select)); }
html:root .ng-article .pg-gloss dt { margin:0 0 4px; font-weight:bold; font-size:14px; color:var(--tn-text); }
html:root .ng-article .pg-gloss dd { margin:0; font-size:12.5px; line-height:1.5; color:var(--tn-text); opacity:0.85; }
html:root .ng-article .pg-gallery--2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
html:root .ng-article .pg-gallery--diagram img { object-fit:contain; background:#fff; padding:8px; }
html:root .ng-article .pg-gallery figcaption small { display:block; margin-top:3px; font-size:11px; opacity:0.7; }
@media only screen and (max-width:900px) { html:root .ng-article .pg-types, html:root .ng-article .pg-gloss { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media only screen and (max-width:640px) { html:root .ng-article .pg-types, html:root .ng-article .pg-gloss, html:root .ng-article .pg-gallery--2 { grid-template-columns:minmax(0, 1fr); } }

/* ---------- VFX industry page ---------- */
html:root .ng-article .vi-stats { clear:both; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin:18px 0 20px; padding:0; list-style:none; }
html:root .ng-article .vi-stats > li { margin:0; padding:16px 16px 14px; list-style:none; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); border-top:4px solid var(--c); text-align:left; }
html:root .ng-article .vi-stats > li:before, html:root .ng-article .vi-timeline > li:before, html:root .ng-article .vi-ladder > li:before, html:root .ng-article .vi-steps > li:before { content:none; }
html:root .ng-article .vi-stats b { display:block; font-size:30px; line-height:1.1; color:var(--tn-text); font-family:"Bahnschrift", "FuturaPT-Book", sans-serif; }
html:root .ng-article .vi-stats span { display:block; margin-top:6px; font-size:13.5px; line-height:1.5; color:var(--tn-text); }
html:root .ng-article .vi-stats small { display:block; margin-top:6px; font-size:11.5px; color:var(--tn-muted); }
html:root .ng-article .vi-timeline, html:root .ng-article .vi-ladder, html:root .ng-article .vi-steps { clear:both; margin:16px 0 20px; padding:0; list-style:none; text-align:left; }
html:root .ng-article .vi-timeline > li { position:relative; display:grid; grid-template-columns:96px minmax(0, 1fr); gap:14px; margin:0; padding:9px 0; list-style:none; border-bottom:1px solid var(--tn-line); }
html:root .ng-article .vi-timeline i, html:root .ng-article .vi-ladder i, html:root .ng-article .vi-steps i { font-style:normal; font-weight:bold; font-size:13px; color:var(--tn-text); }
html:root .ng-article .vi-timeline i { align-self:start; padding:2px 8px; border-radius:6px; background:color-mix(in srgb, var(--c) 16%, transparent); text-align:center; }
html:root .ng-article .vi-timeline span { font-size:14.5px; line-height:1.6; color:var(--tn-text); }
html:root .ng-article .vi-ladder > li { display:grid; grid-template-columns:72px minmax(0, 1fr); gap:4px 14px; margin:0 0 8px; padding:12px 16px; list-style:none; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); border-left:4px solid var(--c); }
html:root .ng-article .vi-ladder > li:nth-child(2) { margin-left:4%; } html:root .ng-article .vi-ladder > li:nth-child(3) { margin-left:8%; } html:root .ng-article .vi-ladder > li:nth-child(4) { margin-left:12%; } html:root .ng-article .vi-ladder > li:nth-child(5) { margin-left:16%; } html:root .ng-article .vi-ladder > li:nth-child(6) { margin-left:20%; }
html:root .ng-article .vi-ladder i { grid-row:span 2; align-self:center; color:var(--tn-muted); }
html:root .ng-article .vi-ladder b { color:var(--tn-text); font-size:15.5px; }
html:root .ng-article .vi-ladder span, html:root .ng-article .vi-steps span { font-size:13.5px; line-height:1.55; color:var(--tn-text); }
html:root .ng-article .vi-steps { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
html:root .ng-article .vi-steps > li { display:grid; grid-template-columns:34px minmax(0, 1fr); gap:2px 12px; margin:0; padding:14px 16px; list-style:none; border-radius:10px; background:var(--tn-card); border:1px solid var(--tn-line); }
html:root .ng-article .vi-steps i { grid-row:span 2; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--c); color:#151515; }
html:root .ng-article .vi-steps b { color:var(--tn-text); font-size:15px; }
html:root .ng-article .vi-steps span a, html:root .ng-article .vi-timeline span a { color:var(--tn-text); text-decoration:underline; }
html:root .ng-article .vi-note { font-size:12.5px !important; line-height:1.55; color:var(--tn-muted) !important; }
html:root .ng-article .vi-pay td, html:root .ng-article .vi-pay th { text-align:right !important; white-space:nowrap; }
html:root .ng-article .vi-pay td:first-child, html:root .ng-article .vi-pay th:first-child { text-align:left !important; white-space:normal; }
html:root .ng-article .vi-pay th small { font-weight:normal; opacity:0.75; text-transform:none; }
html:root .ng-article .vi-closed td:first-child { white-space:nowrap; }
html:root .ng-article .vi-closed td:nth-child(2) { font-weight:bold; }
html:root .ng-article .vi-fig { max-width:760px; }
html:root body.ng-guide .vi-fig .mt-chart text { stroke:none; }
@media only screen and (max-width:900px) { html:root .ng-article .vi-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media only screen and (max-width:640px) { html:root .ng-article .vi-steps { grid-template-columns:minmax(0, 1fr); } html:root .ng-article .vi-ladder > li { margin-left:0 !important; } html:root .ng-article .vi-timeline > li { grid-template-columns:76px minmax(0, 1fr); } html:root .ng-article .vi-pay td, html:root .ng-article .vi-pay th { padding:6px 4px !important; font-size:12px !important; } }
html:root .ng-article .vi-pay, html:root .ng-article .vi-closed { width:100%; }
@media only screen and (max-width:640px) { html:root .ng-article .vi-pay td, html:root .ng-article .vi-pay th { white-space:normal !important; font-size:11.5px !important; padding:5px 3px !important; } html:root .ng-article .vi-closed td, html:root .ng-article .vi-closed th { white-space:normal !important; font-size:12px !important; padding:6px 4px !important; } }
html:root .ng-article .vi-scroll { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
html:root .ng-article blockquote.vi-template { clear:both; margin:12px 0 18px; padding:14px 18px; border:1px solid var(--tn-line); border-left:4px solid var(--c); border-radius:10px; background:var(--tn-card); color:var(--tn-text); font-family:Consolas, Menlo, monospace; font-size:13.5px; font-style:normal; line-height:1.65; text-align:left; quotes:none; }
html:root .ng-article blockquote.vi-template:before, html:root .ng-article blockquote.vi-template:after { content:none; }
html:root .ng-article blockquote.vi-template b { font-family:inherit; }
html:root .ng-article .vi-ladder--flat > li { margin-left:0 !important; }
html:root .ng-article .vi-answer { clear:both; margin:14px 0 22px; padding:18px 22px 6px; border-radius:10px; background:color-mix(in srgb, var(--c, #2c9f97) 8%, var(--tn-card)); border:1px solid var(--tn-line); border-left:4px solid var(--c, #2c9f97); }
/* STMap lab */
html:root .ng-article .st-lab { display:block; }
.st-panes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:10px 0 6px; }
.st-panes figure { margin:0; }
.ng-article article .st-panes canvas { display:block; width:100%; height:auto; border-radius:8px; background:#111; cursor:crosshair; touch-action:none; }
.st-panes figure.st-src-fig canvas { cursor:default; }
html:root .ng-article .st-panes figcaption { margin-top:6px; font-size:12px; line-height:1.45; color:var(--tn-muted); text-align:left; }
html:root .ng-article .st-read { min-height:3.2em; margin:8px 0 0; font-size:14px; line-height:1.55; color:var(--tn-text); }
html:root .cm-lab button.is-on { background:var(--tn-select); border-color:var(--tn-select); color:#151515; }
@media only screen and (max-width:760px) { .st-panes { grid-template-columns:minmax(0, 1fr); } }

/* About: District Zero, logo beside a short text */
.ng-dz-card { display:flex; align-items:center; gap:28px; max-width:920px; margin:34px auto 0; padding:22px 24px; border-radius:12px; background:var(--tn-card); border:1px solid var(--tn-line); box-shadow:0 6px 20px rgba(0,0,0,0.06); text-align:left; }
.ng-dz-logo { flex:0 0 260px; display:block; padding:16px 18px; border-radius:8px; background:#0b0b0c; }
.ng-dz-logo img { display:block; width:100%; height:auto; }
html:root .ng-dz-card p { margin:0 0 10px; font-size:15px; line-height:1.65; color:var(--tn-muted); text-align:left; }
html:root .ng-dz-card p:last-child { margin-bottom:0; }
html:root .ng-dz-card p a { color:var(--tn-text); text-decoration:underline; }
@media (max-width: 767px) { .ng-dz-card { flex-direction:column; align-items:stretch; gap:16px; padding:18px; } .ng-dz-logo { flex:none; max-width:260px; } }

/* Header logo (name), restored from the old site: light and dark versions */
html:root .logo-holder { position:absolute; top:35px; left:24px; width:auto; height:34px; transform:translateY(-50%); z-index:5; }
html:root .logo-holder a { display:block; height:100%; }
html:root .logo-holder img { display:block; float:none; width:auto; height:100%; }
html:root .logo-holder .logo-d, html[data-theme="dark"]:root .logo-holder .logo-l { display:none; }
html[data-theme="dark"]:root .logo-holder .logo-d { display:block; }

/* WhatsApp: a green button next to the email buttons, and a line under the email in the contact sections */
html:root a.ng-btn--wa { background:#25d366; color:#06301a; }
html:root a.ng-btn--wa:hover { background:#1ebe5a; color:#06301a; box-shadow:0 10px 24px rgba(37,211,102,0.35); }
html:root .ng-wa-line { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:14px 0 18px; }
html:root .ng-wa-line a.ng-btn:not(.ng-btn--wa) { color:#1d1704; }
html:root .ng-wa-line a.ng-btn--wa { color:#06301a; }

/* About h1: the role under "About me" (SEO: Senior Digital Compositor, VFX Artist) */
html:root h1.ng-h1 .ng-h1-role { display:block; margin-top:10px; font-size:0.36em; font-weight:400; letter-spacing:2px; text-transform:uppercase; opacity:0.85; }
html:root footer .policy-box a { color:inherit; text-decoration:none; }
html:root footer .policy-box a:hover { text-decoration:underline; }