/*******************************************************************************************
		load fonts
		*******************************************************************************************/

		@import url('https://fonts.googleapis.com/css?family=Ubuntu');


		/*******************************************************************************************
		theme tokens (shadows / gradients) -- added for dark-mode readiness
		*******************************************************************************************/

		:root {
			--lie-shadow-strong: 0 1px 4px rgba(0,0,0,0.15);
			--lie-shadow-soft: 0 1px 4px rgba(0,0,0,0.05);
			--lie-bevel-dark: rgba(0,0,0,0.5);
			--lie-bevel-light: rgba(255,255,255,.4);
			--lie-text-shadow-soft: 1px 1px 2px #ccc;
			--lie-progress-fill: #33adad;
			--lie-progress-track: #ddd;
			--lie-checkbox-grad-start: #ccc;
			--lie-checkbox-grad-end: #ddd;
			--lie-divider-fade: rgba(0,0,0,0.75);
			--lie-selector-navy: #003366;
			--lie-selector-white: #ffffff;
			--lie-prev-arrow: #ffffff;
			--lie-prev-back: #a0a0a0;
			
			/* semantic color tokens -- Phase 0 audit, approved mapping, written live here */
			--lie-index-text: #ffffff;
			--lie-index-text-subtle: #eeeeee;
			--lie-text-primary: #212121;
			--lie-text-emphasis: #000000;
			--lie-text-muted: #595959;
			--lie-border: #cccccc;
			--lie-shadow: #272727;
			--lie-bg: #ffffff;				
			--lie-bg-subtle: #eeeeee;
			--lie-card-hover: #f2f2f2;
			--lie-input-bg: #ffffff;
			--lie-info-btn: #ffffff;
			--lie-info-bg: #737373;
			
			--lie-reveal-blue: #286da8;
			--lie-reveal-blue-dark: #1e5a8e;
			--lie-accent-blue: #4a6796;
			--lie-accent-blue-bg: #eef0f5;
			--warn-red: #ff0000;

			--lie-skills-primary: #286da8;
			--lie-skills-primary-bg: #eef5fb;			
			--lie-acad-primary: #b24385;
			--lie-acad-primary-bg: #f6e9f1;
			--lie-easy-primary: #e37222;
			--lie-easy-primary-bg: #fff7f1;
			--lie-tv-primary: #009999;
			--lie-tv-primary-bg: #e6f4f4;
			--lie-skills-primary-dark: #1e5a8e;
			--lie-acad-primary-dark:   #8b3468;
			--lie-easy-primary-dark:   #b1591b;
			--lie-tv-primary-dark:     #007777;			

			--lie-error: #ff0000;
			--lie-error-bg: #fdecea;
			--lie-success: #008000;
			--lie-success-bg: #e8f5e9;
			
			--lie-updated-color: #2e7d32;      /* forest green, ~4.5:1 on white */
			--lie-new-color: #c62828;          /* deep red, ~5.9:1 on white */
			--lie-recommended-color: #7b1fa2;  /* deep purple, ~7.3:1 on white */		

			--sort-font: Tahoma, Helvetica, Arial;
			--sort-color: var(--lie-accent-blue);
			--sort-color-hover: var(--lie-text-emphasis);
			--sort-label-color: var(--lie-text-muted);
			--sort-menu-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			--sort-bar-shadow: 2px 2px 2px var(--lie-shadow-soft);
			--sort-bar-bg: var(--lie-bg);
			--lie-next-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" fill="none" stroke="black" stroke-width="1.6"/><path d="M9.5 7.5 L17 12 L9.5 16.5 Z" fill="black"/></svg>');
		}


		body.dark-theme {
			--lie-updated-color: #66bb6a;      /* light green, ~7:1 on dark */
			--lie-new-color: #ef5350;          /* light red, ~5.5:1 on dark */
			--lie-recommended-color: #ba68c8;  /* light purple, ~6.5:1 on dark */

			/* shadow / gradient tokens -- dark counterparts */
			
			--lie-shadow-strong: 0 1px 4px rgba(0,0,0,0.15);
			--lie-shadow-soft: 0 1px 4px rgba(0,0,0,0.05); 
			--lie-bevel-dark: rgba(0,0,0,0.7);
			--lie-bevel-light: rgba(255,255,255,.15);
			--lie-text-shadow-soft: 1px 1px 2px rgba(0,0,0,0.6);
			--lie-progress-fill: #33adad;
			--lie-progress-track: #666666;
			--lie-checkbox-grad-start: #444444;
			--lie-checkbox-grad-end: #333333;
			--lie-divider-fade: rgba(255,255,255,0.4);
			--lie-selector-navy: #0a1a2e;
			--lie-selector-white: #1e1e1e;
			--lie-prev-arrow: #ffffff;
			--lie-prev-back: #a0a0a0;
			
			/* semantic color tokens -- dark counterparts */
			--lie-index-text: #ffffff;
			--lie-index-text-subtle: #eeeeee;
			--lie-text-primary: #e0e0e0;
			--lie-text-emphasis: #f5f5f5;
			--lie-text-muted: #c2c2c2;
			--lie-border: #808080; 
			--lie-shadow: #000000;
			--lie-bg: #343434; 			
			--lie-bg-subtle: #121212;
			--lie-card-hover: #2a2a2a;
			--lie-input-bg: #525252;
			--lie-info-btn: #a3a3a3;
			--lie-info-bg: #343434;
			
			--lie-reveal-blue: #a8cdf0;
			--lie-reveal-blue-dark: #6bade0;
			--lie-accent-blue: #8aa3c9;
			--lie-accent-blue-bg: #1c2430;
			--warn-red: #ff6b6b;
			
			--lie-skills-primary: #4a94cf;
			--lie-skills-primary-bg: #16232c;
			--lie-acad-primary: #ad6690;
			--lie-acad-primary-bg: #2a1e26;
			--lie-easy-primary: #e68a44;
			--lie-easy-primary-bg: #2a2119;
			--lie-tv-primary: #2dbdbd;
			--lie-tv-primary-bg: #142626;

			--lie-error: #f16565;
			--lie-error-bg: #2c1616;
			--lie-success: #43a047;
			--lie-success-bg: #14261a;
			
		}


		/*******************************************************************************************
		transitions and animations
		*******************************************************************************************/

		@keyframes fadein {
			from { opacity: 0; }
			to   { opacity: 1; }
		}

		@-webkit-keyframes slide {
			100% { left: 0; }
		}

		@keyframes slide {
			100% { left: 0; }
		}

		/*******************************************************************************************
		********************************************************************************************
		PC BROWSER DEVICES
		********************************************************************************************
		*******************************************************************************************/


		/*******************************************************************************************
		PC browser swaps
		*******************************************************************************************/

		.pc	{
				display: block;
			}

		.pci	{
				display: inline-block;
			}

		.pconly	{
				display: block;
				}

		.hand	{
				display: none;
			}

		.handi	{
				display: none;
			}

		.tablet	{
				display: none;
			}
			
		.hbWrap { display: none; }			


		/*******************************************************************************************
		Language on / off
		*******************************************************************************************/

		.eng {
			display: inline-block;	
		}

		.ukr {
			display: none;
		}

		.kor {
			display: none;
			font-family: 'Nanum Gothic Coding', monospace;
		}

		.spn {
			display: none;
		}

		.por {
			display: none;
		}




		/*******************************************************************************************
		PC browser page setup
		*******************************************************************************************/

		body {
			background-color: var(--lie-bg-subtle);
			margin: 0;
			padding: 0;
			}

		header {
			position: fixed;
			background-color:  var(--lie-bg);
			width: 100%;
			height: 54px;
			padding: 0px 0px 0px 0px;
			margin: auto;
			z-index: 100;
			}

		#site-header-pc {
			box-shadow: var(--lie-shadow-strong);
			position: fixed;
			z-index: 999999;
			}	

		section	{
			background-color: var(--lie-bg-subtle);
			width: 1260px;
			padding-left: 0px;
			padding-right: 0px;
			padding-top: 10px;
			padding-bottom: 10px;
			margin: auto;
			text-align: left;
			}

		.center {
			vertical-align: top;
			display: block;
			width: 1185px;
			margin: 52px auto 0px auto;
			padding: 2px 0px;

			}

		footer {
			border-top: 1px solid var(--lie-text-emphasis);
			background-color:  var(--lie-bg);
			width: 100%;
			padding: 0px 0px 12px 0px;
			margin: 0px;
			z-index: 100;
			}









		/*******************************************************************************************
		Destktop Header
		*******************************************************************************************/

		.dycent-h {
			position: relative;
			display: flex;
			width: 1260px;
			z-index: 100;
			top: 0px;
			background-color:  var(--lie-bg);			
			align-items: center;
			gap: 12px;
			min-height: 54px;
			margin: auto;
			padding: 0 22px;
			box-sizing: border-box;
			
		}

		/* --- logo --- */

		.logo-container {
			flex: 0 0 auto;
			display: flex;
			align-items: center;
		}

		.logo-container a {
			display: flex;
			align-items: center;
			text-decoration: none;
		}

		body.dark-theme .titlelogo { content: url(https://www.listeninenglish.com/sitimg/logo3.svg); }

		.titletext {
			display: flex;
			align-items: center;
			color: var(--lie-text-emphasis);
			font-family: Ubuntu, Arial;
			font-size: 22px;
			font-weight: normal;
			line-height: 1;
		}

		.titlelogo {
			height: 34px;
			width: auto;
			display: block;
			margin-right: 1px;
		}

		/* --- activity list --- */

		.c-wrapper {
			flex: 0 0 auto;
			position: relative;
			color: var(--lie-text-emphasis);
		}

		/* --- right controls --- */

		.hdrCtls {
			flex: 0 0 auto;
			margin-left: auto;
			display: flex;
			align-items: center;
			gap: 4px;
		}


		.hdrBtn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			height: 34px;
			min-width: 34px;
			padding: 0 7px;
			border: 0;
			border-radius: 0;
			background: none;
			color: var(--lie-text-muted);
			font-family: Calibri, Helvetica, Arial;
			font-size: 18px;
			line-height: 0;
			cursor: pointer;
			text-decoration: none;
			transition: background-color .15s ease, color .15s ease;
		}

		.hdrBtn:focus-visible,
		.hdrMenu.open > .hdrBtn {
			background: var(--lie-border);
			color: var(--lie-text-emphasis);
		}

		@media (hover: hover) {
			.hdrBtn:hover {
				background: var(--lie-border);
				color: var(--lie-text-emphasis);
			}
		}

		.hdrIco { width: 21px; height: 21px; display: block; }
		.hdrBtnDm .hdrIco { width: 20px; height: 20px; }

		.hdrCaret { width: 10px; height: 6px; margin-left: 5px; display: block; opacity: .55; }

		.hdrFlag { width: 25px; height: auto; border-radius: 100%; }

		.hdrMenu { position: relative; }

		.hdrPop {
			display: none;
			position: absolute;
			top: calc(100% + 11px);
			right: 0;
			z-index: 900;
			min-width: 160px;
			padding: 5px 0;
			background: var(--lie-bg);
			border-radius: 0;
			box-shadow: var(--lie-shadow-strong);
			text-align: left;
		}

		.hdrMenu.open > .hdrPop { display: block; }

		.hdrPopRow {
			display: flex;
			align-items: center;
			gap: 7px;
			width: 100%;
			box-sizing: border-box;
			padding: 7px 10px;
			border: 0;
			border-radius: 0;
			background: none;
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica, Arial;
			font-size: 18px;
			line-height: 1.20;
			text-align: left;
			text-decoration: none;
			white-space: nowrap;
			cursor: pointer;
		}

		a.hdrPopRow:link,
		a.hdrPopRow:visited {
			color: var(--lie-text-emphasis);
		}				

		.hdrPopRow:focus-visible { background: var(--lie-border); }
		
		@media (hover: hover) {
			.hdrPopRow:hover { background: var(--lie-border); }
		}

		.hdrPopFlag { width: 24px; height: auto; flex: 0 0 auto; border-radius: 100%; }
		.hdrPopNew  { width: 26px; height: auto; margin-left: 4px; }

		.hdrPopDiv {
			height: 0;
			margin: 5px 0;
			border: 0;
			border-top: 1px solid var(--lie-border);
		}
																	
		a.hdrBtn.hdrBtnSearch {
			color: var(--lie-text-muted);
		}

		a.hdrBtn.hdrBtnSearch:hover,
		a.hdrBtn.hdrBtnSearch:focus-visible {
			color: var(--lie-text-emphasis);
		}
																					
		.pdftag {
			font-size: 0.7em;	
			color: var(--lie-error);
		}
			
		/*******************************************************************************************
		Desktop Header Drop Down Catalogue 
		*******************************************************************************************/


		.dropPosition {
			margin: 0;
		}

		.c-wrapper ul {
				margin: 0px;
				padding: 0px;
				list-style: none; 
				white-space: nowrap;
		}

		.c-wrapper .s0-Menu>li {
			display: inline-block;
		}

		.c-wrapper .s0-Menu a {
				position: relative;
				margin: 0px;
				text-align: left;
				font-family: Calibri;
				font-size: 17px;	
				color: var(--lie-text-muted);
				text-decoration: none;
				padding: 6px 6px 20px 6px;
		}

		.c-wrapper .s1-Menu a {
				display: block;
				padding: 4px 2px 4px 2px;
				width: 165px;	
				color: var(--lie-text-emphasis);
		}

		.c-wrapper .s2-Menu a {
				display: block;
				padding: 4px 2px 4px 2px;
				width: 200px;
		}

		.c-wrapper .s3-Menu a {
				display: block;
				padding: 4px 2px 4px 2px;
				width: 195px;
		}

		.c-wrapper .s3-Compact a {
				display: block;
				padding: 3px 2px 3px 2px;
				width: 255px;
		}

		.c-wrapper .s1-Menu {
				position: absolute;
				top: 40px;
				left: -14px;
				display: none;
				background: color-mix(in srgb, var(--lie-bg) 97%, transparent);
				width: 160px;
				min-height: 144px;	
				padding: 5px 0px 5px 15px;	/* around box */
				box-shadow: var(--lie-shadow-strong);
		}

		.c-wrapper .s2-Menu {
				position: absolute;
				top: 0px;
				left: 177px;
				display: none;
				background: color-mix(in srgb, var(--lie-bg) 97%, transparent);
				width: 195px;
				min-height: 174px;	
				padding: 5px 0px 5px 15px;	/* around box */ 	
				box-shadow: var(--lie-shadow-strong);
		}

		.c-wrapper .s3-Menu  {
			position: absolute;
			top: 0px;
			left: 212px;
			display: none;
			background: color-mix(in srgb, var(--lie-bg) 97%, transparent);
			width: 253px;
			min-height: 182px;	
			padding: 5px 15px;	/* around box */
			box-shadow: var(--lie-shadow-strong);
			max-height: 464px;
			overflow-y: auto;
			overflow-x: hidden;				
		}

		.c-wrapper .s1-Menu li {
			padding: 0px 15px;
			margin-top: 0px;
			margin-bottom: 0px;
		}

		.c-wrapper .s2-Menu li {
			padding: 0px 15px;
			margin-top: 0px;
			margin-bottom: 0px;
		}

		.c-wrapper .s3-Menu li {
			padding: 0px 15px;
			margin-top: 0px;
			margin-bottom: 0px;
		}

		.c-wrapper .s0-Menu a:hover {
			color: var(--lie-text-emphasis);

		}

		.c-wrapper .s1-Menu li:hover {
			background-color: var(--lie-border);
			cursor: pointer;	
		}

		.c-wrapper .s0-Menu>li:hover .s1-Menu {
			display: block;
		}

		.c-wrapper .s1-Menu>li:hover .s2-Menu {
			display: block;
		}
		 
		.c-wrapper .s2-Menu>li:hover .s3-Menu {
			display: block;
		}

		.c-wrapper .arrowOne {
			display: inline-block;
			border: 2px solid var(--lie-text-emphasis);
			width: 4px;
			height: 4px;
			border-left: none;
			border-bottom: none;
			position: absolute;
			top: 13px;
			right: 22px;
			margin: 0px 0px;
			transition: all 0.5s;
		}

		.c-wrapper .arrowTwo {
			display: inline-block;
			border: 2px solid var(--lie-text-emphasis);
			width: 4px;
			height: 4px;
			border-left: none;
			border-bottom: none;
			position: absolute;
			top: 13px;
			right: 22px;
			margin: 0px 0px;
			transition: all 0.5s;
		}

		.c-wrapper .arrowOne {
				transform: rotateZ(45deg);
		}

		.c-wrapper .arrowTwo {
				transform: rotateZ(45deg);
		}

		.c-wrapper .s1-Menu>li:hover .arrowOne {
				transform: rotateZ(45deg) translate(5px, -5px);
		}

		.c-wrapper .s2-Menu>li:hover .arrowTwo {
				transform: rotateZ(45deg) translate(5px, -5px);
		}

		.navDate {
			font-size: 0.80em;
			opacity: 0.70;
			margin: 0 0 0 3px;
		}


		/*******************************************************************************************
		footer -- sitemap / link colour override
		*******************************************************************************************/



		.ftDiv {
			border-bottom: 1px solid var(--lie-border);
			margin: 14px 0px;
		}

		/* specificity 0,2,2 -- must beat bare a:link (0,1,1) in the theme files,
		   which load AFTER this file. a.ftLink alone would tie and lose on cascade order. */
		footer a.ftLink:link,
		footer a.ftLink:visited {
			color: var(--lie-text-primary);
			text-decoration: none;
		}

		footer a.ftLink:hover,
		footer a.ftLink:active {
			color: var(--lie-text-emphasis);
			text-decoration: underline;
		}

		.ftMap {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: flex-start;
			gap: 24px 56px;
			max-width: 1185px;
			margin: 0px auto;
			padding: 14px 12px 6px 120px;
			text-align: left;
		}

		.ftMapCol {
			width: 180px;
		}

		.ftMapHead {
			font-weight: bold;
			color: var(--lie-text-emphasis);
			margin-bottom: 6px;
		}

		/* div-based rows -- no <ul>, so no UA list padding and no footer ul
		   rule in global-css to fight on specificity. */
		.ftMapRow {
			display: block;
			margin: 0px 0px 4px 0px;
		}

		.sharefoot {
			width: 150px;
			margin: 5px auto 5px auto;
			padding: 30px 0px 0px 0px;
		}


		.socialIcon { 
			height: 32px;  
			margin: 0px 5px 5px 5px;
		}

		.footcenter {
			padding: 30px 0px 18px 70px;
			top: 0px;
			margin: auto;
			width: 1260px;
			z-index: 100;
			height: 30px;
			background-color:  var(--lie-bg);
		}

		.gadvert {
			margin: auto;
			padding: 8px 0 0 0;
		}





		/********************************************
		button:focus {
			outline:0;
		}
		********************************************/








		/*******************************************************************************************
		Desktop fonts
		*******************************************************************************************/


		h1	{
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 13px;
			font-weight: normal;
			text-shadow: none;
			margin: 3px 0px 3px 0px;
			}

		h2	{
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 24px;
			font-weight: normal;
			text-shadow: none;
			margin: 0px 0px 2px 0px;
			}

		h3	{
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica;
			font-size: 24px;
			font-weight: normal;
			text-shadow: none;
			margin: 0px;
			}

		h4	{
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica;
			font-size: 21px;
			font-weight: normal;
			text-shadow: none;
			margin: 0px;
			}

		h5 	{
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 24px;
			font-weight: normal;
			text-shadow: none;
			margin: 0px 0px 2px 0px;
			}
			
		p	{
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 18px;
			font-weight: normal;
			margin-top: 2px;
			margin-bottom: 2px;
			margin-left: 2px;
			margin-right: 0px;
			}

		li	{
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 17px;
			font-weight: normal;
			margin: 3px 0px 3px -15px;
			padding: 2px 10px 2px 10px;
			}

		.discussQuestion li {
			padding: 8px 10px 8px 10px;
			}

		#language li {
			padding: 4px 10px 4px 8px;
			}




		/*******************************************************************************************
		links and mouseovers
		*******************************************************************************************/

			
		a:link  {
			color: var(--lie-text-emphasis);
			text-decoration:  none;
			} 
		a:visited {
			color: var(--lie-text-emphasis);
			text-decoration:  none;
			} 
		a:hover {
			color: inherit;
			text-decoration:  none;
			} 
		a:active  {
			color: inherit;
			text-decoration:  none;
			} 

		.gramchoice {
			font-family: Calibri, Helvetica;
			font-size: 14px;
			margin: 2px 0px 2px 30px;
			}
			






		/************************************************************************************************************************************************************************************************************************
		Hero Image Index page setup
		************************************************************************************************************************************************************************************************************************/


		/************************Top Banner Formatting******************************/

		.pcBanner {
			background-image: url("/sitimg/banner-lg.webp") ;
			background-repeat: no-repeat;
			background-size: cover;
			
			background-color: var(--lie-border);
			margin: 40px 0px 10px 0px;
			padding: 50px 0px 70px 80px;
			transition: 1s;
		}

		.bannerTitle {
			color: var(--lie-index-text); 	
			font-family: Calibri, Helvetica, Arial; 
			font-size: 24px;
			margin: 0px 0px 10px 0px;
			padding: 0px 0px 0px 0px;
			
		}

		.bannerText {
			color: var(--lie-index-text); 
			font-family: Calibri, Helvetica, Arial;  
			font-size: 18px;
			margin: 0px 0px 10px 0px;
			padding: 0px 0px 0px 0px;
		}

		.backColor {
			background-color: rgba(0, 0, 0, 0.2);
			padding: 0 3px 0 3px;
		}

		/************************The Four Activity Buttons******************************/

		.selectorContainer {
			margin: 0px 0px 0px 0px;
			padding: 0px;
			border-radius: 0px;
		}

		.selectButton {
			width: 120px;
			height: 110px;
			display: inline-block;
			margin:  4px 4px;
			padding: 10px;
			border-radius: 15px;
			border: 1px solid var(--lie-bg);
			transition: 850ms;
			color: var(--lie-index-text);
		}	

		.selectorTitle {
			display: block;
			font-family: Calibri, Helvetica;
			font-size: 21px;
			font-weight: normal;
			vertical-align: middle;	
			text-align: center;
			text-shadow: none;	
			margin: 8px 0px 0px 0px;
			padding: 0px 0px 0px 0px;	
		}

		.selectorLevel {
			display: block;
			font-family: Calibri, Helvetica;
			font-size: 14px;
			font-weight: normal;
			vertical-align: middle;
			text-align: center;
			text-shadow: none;	
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;	
		}

		.selectorIconsOn {
			border-radius: 100%;
			display: block;
			width: 61px;
			margin: 0px auto;
			box-shadow: var(--lie-shadow-soft);		
		}

		.selectorIconsOff {
			border-radius: 100%;
			display: block;
			width: 61px;
			margin: 0px auto;
			box-shadow: var(--lie-shadow-soft);		
		}


		/* var(--lie-easy-primary)  */
		.colorEasy {
			border: 1px solid var(--lie-easy-primary);
			background-color: rgba(230, 130, 45, 0.03);
		}

		#easyButton:hover {
			background-color: rgba(230, 130, 45, 0.15);
		}

		/* var(--lie-tv-primary)  */
		.colorTV {
			border: 1px solid var(--lie-tv-primary);
			background-color: rgba(0, 153, 153, 0.03);
		}

		#TVButton:hover {
			background-color: rgba(0, 153, 153, 0.15);
		}

		/* var(--lie-reveal-blue)  */
		.colorNews {
			border: 1px solid var(--lie-reveal-blue);
			background-color: rgba(40, 109, 168, 0.03);	
		}

		#newsButton:hover {
			background-color: rgba(40, 109, 168, 0.15);
		}

		/* var(--lie-acad-primary)  */
		.colorAcad {
			border: 1px solid var(--lie-acad-primary);
			background-color: rgba(178, 67, 133, 0.03);	
		}

		#acadButton:hover {
			background-color: rgba(178, 67, 133, 0.15);
		}

		.block {
			transition: 1000ms;
		}

		.bbcFrame {
			border-top: 0px solid var(--lie-index-text); 
			border-bottom: 0px solid var(--lie-index-text); 
			border-left: 1px solid var(--lie-index-text);  
			border-right: 1px solid var(--lie-index-text);  
			border-radius: 10px; 
			width: 220px; 
			padding: 6px 3px 4px 10px;	
			margin:	0px 0px 0px 35px;
			transition: 2s;
		}

		.bbcFrame:hover {
			background-color: rgba(0, 0, 0, 0.1);
		}


		.bbcTitle {
			color: var(--lie-index-text-subtle); 
			font-family: Calibri, Helvetica, Arial; 
			font-size: 15px; 
			padding: 0px 0px 0px 0px;
		}

		.bbcText {
			color: var(--lie-index-text-subtle); 
			font-family: Calibri, Helvetica, Arial; 
			font-size: 13px; 
			padding: 0px 0px 0px 10px;
		}
			
		.bbcMediapic {
			display: block;
			width: 48px;
			padding: 0px 0px 0px 0px; 
			margin: 0 8px 0 0;	
			border-radius: 8px;
			float: right;	
		}
				
		.bbcIcon {
			width: 30px; 
			padding: 5px 10px 10px 5px;
			float: left;
		}

		.bbcHover  {
			display: none;
		}

		.bbc:hover .bbcStart {
			display: none;
		}

		.bbc:hover .bbcHover {
			display: block;
		}	

		.titletag {
			font-family: Calibri, Helvetica, Arial;
			font-size: 11px;
			margin: -7px 0px -16px 0px;
			line-height: 1.1;
			padding: 0;
		}








		/*******************************************************************************************
		Desktop index cards setup
		*******************************************************************************************/
																				
		.recentbox {
			max-width: 1260px;
			width: 100%;
			min-width: 600px;
			margin: auto;
		}

		#ezAll {
			max-width: 1240px;
			width: 100%;
			margin: 0 auto;
		}

		#tvAll {
			max-width: 1230px;
			width: 100%;
			margin: 0 auto;
		}

		#acAll {
			max-width: 1230px;
			width: 100%;
			margin: 0 auto;
		}

		#skAll {
			max-width: 1230px;
			width: 100%;
			margin: 0 auto;
		}

		#statusAll {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 8px;
			max-width: 1230px;
			width: 100%;
			margin: 0 auto;
		}

		#skCards {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 8px;
			max-width: 1230px;
			width: 100%;
			margin: 0 auto;
		}

		#tvCards {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 8px;
			max-width: 1230px;
			width: 100%;
			margin: 0 auto;
		}
		
		#ezCards {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 8px;
			max-width: 1230px;
			width: 100%;
			margin: 0 auto;
		}

		#acCards {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 8px;
			max-width: 1230px;
			width: 100%;
			margin: 0 auto;
		}

		.lieHidden {
			display: none !important;
		}


		/****************Unified Lesson Card (desktop)*********************/

		.lieStatusGroup {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 8px;
		}


		.lieSortBar {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			gap: 4px;
			max-width: 1260px;
			width: 100%;
			padding: 8px 16px;
			margin: 12px 0 12px 0;
			background-color: var(--lie-bg);
			box-shadow: var(--lie-shadow-soft);
			border-radius: 0px;
		}

		.lieSortLabel {
			font-family: Tahoma, Helvetica, Arial;
			font-size: 18px;
			font-weight: 500;
			color: var(--lie-text-muted);
			margin-right: 4px;
			white-space: nowrap;
		}

		.lieSortDrop {
			position: relative;
		}

		.lieSortBtn {
			display: flex;
			align-items: center;
			gap: 4px;
			font-family: Tahoma, Helvetica, Arial;
			font-size: 18px;
			color: var(--lie-accent-blue);
			background: none;
			border: none;
			cursor: pointer;
			padding: 6px 8px;
			white-space: nowrap;
		}

		.lieSortBtn:hover {
			color: var(--lie-text-emphasis);
		}

		.lieSortArrow {
			width: 10px;
			height: auto;
		}

		.lieSortMenu {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			margin-top: 10px;
			background-color: var(--lie-bg);
			min-width: 170px;
			border-radius: 4px;
			box-shadow: var(--lie-shadow-strong);
			z-index: 200;
		}

		.lieSortMenu a {
			display: block;
			font-family: Tahoma, Helvetica, Arial;
			font-size: 15px;
			color: var(--lie-text-emphasis);
			padding: 8px 12px;
			text-decoration: none;
			white-space: nowrap;
		}

		.lieSortMenu a:hover {
			color: var(--lie-bg);
			background-color: var(--lie-text-emphasis);
		}

		.lieSortDrop.open .lieSortMenu {
			display: block;
		}

		.lieSortAll {
			margin-left: 4px;
		}

		.lieStatusBar {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			gap: 8px;
			max-width: 1260px;
			width: 100%;
			padding: 10px 22px;
			margin: 12px 0 12px 0;
			background-color: var(--lie-bg);
			box-shadow: var(--lie-shadow-soft);
			border-radius: 0px;
		}

		.lieSortBar {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			gap: 4px;
			max-width: 1260px;
			width: 100%;
			padding: 8px 16px;
			margin: 120px 0 12px 0;
			background-color: var(--lie-bg);
			box-shadow: var(--lie-shadow-soft);
			border-radius: 0px;
		}


		.lieStatusBtn {
			font-family: Tahoma, Helvetica, Arial;
			font-size: 16px;
			font-weight: 500;
			color: var(--lie-text-muted);
			background: none;
			border: none;
			cursor: pointer;
			padding: 6px 4px;
			white-space: nowrap;
			border-bottom: 2px solid transparent;
			transition: color 0.2s, border-color 0.2s;
		}

		.lieStatusBtn:hover {
			color: var(--lie-text-emphasis);
		}

		.lieStatusBtn.active {
			color: var(--lie-accent-blue);
			font-weight: 700;
			border-bottom: 2px solid var(--lie-accent-blue);
		}

		.lieStatusShow {
			margin-left: auto;
			font-family: Calibri, Helvetica;
			font-size: 19px;
			font-weight: normal;
			color: var(--lie-accent-blue);
			text-decoration: none;
			white-space: nowrap;
			padding: 6px 0px;
		}

		.lieStatusAdv {
			margin-left: auto;
			font-family: Calibri, Helvetica;
			font-size: 19px;
			font-weight: normal;
			color: var(--lie-accent-blue);
			text-decoration: none;
			white-space: nowrap;
			padding: 6px 0px;
		}
		.lieStatusAdvIcon { display: none; }

		.lieStatusShow:hover {
			color: var(--lie-text-emphasis);
		}

		.lieCard {
			display: flex;
			position: relative;
			align-items: stretch;
			min-height: 105px;
			width: 98%;
			background-color: var(--lie-bg);
			border-left: 6px solid var(--lie-border);
			border-right: 6px solid var(--lie-border);
			
			border-radius: 16px 16px 16px 16px;
			box-shadow: var(--lie-shadow-soft);
			overflow: hidden;
			transition: 0.5s;
		}
		.lieCard:hover {
			box-shadow: var(--lie-shadow-strong);
			background-color: var(--lie-card-hover);  
		}
		.lieCard.barEasy   { border-left-color: var(--lie-easy-primary);    }
		.lieCard.barTV     { border-left-color: var(--lie-tv-primary);     }
		.lieCard.barAcad   { border-left-color: var(--lie-acad-primary);   }
		.lieCard.barSkills { border-left-color: var(--lie-skills-primary);  }

		.lieCard.barTV:hover     { border-left-color: var(--lie-tv-primary-dark);   }
		.lieCard.barEasy:hover   { border-left-color: var(--lie-easy-primary-dark);  }
		.lieCard.barAcad:hover   { border-left-color: var(--lie-acad-primary-dark);   }
		.lieCard.barSkills:hover { border-left-color: var(--lie-skills-primary-dark); }

		.lieCard.barEasy   { border-right-color: var(--lie-easy-primary);    }
		.lieCard.barTV     { border-right-color: var(--lie-tv-primary);     }
		.lieCard.barAcad   { border-right-color: var(--lie-acad-primary);   }
		.lieCard.barSkills { border-right-color: var(--lie-skills-primary);  }

		.lieCard.barTV:hover     { border-right-color: var(--lie-tv-primary-dark);   }
		.lieCard.barEasy:hover   { border-right-color: var(--lie-easy-primary-dark);  }
		.lieCard.barAcad:hover   { border-right-color: var(--lie-acad-primary-dark);   }
		.lieCard.barSkills:hover { border-right-color: var(--lie-skills-primary-dark); }
		
		.lieCardBody {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 10px 10px 10px 20px;
			min-width: 0;
			order: 2;
		}

		.lieCardTitle {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 19px;
			font-weight: bold;
			line-height: 1.2;
			margin: 0 0 0px 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.lieCardSeries {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 15px;
			line-height: 1.3;
			margin: 0 0 0px 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.lieCardTime {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 15px;
			line-height: 1.3;
			margin: 0px 0 0 0;
		}
		
		.lieCardLevel {
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica;
			font-size: 15px;
			line-height: 1.3;
			font-weight: bold;
		}
		
		.lieCardMeta {
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.flag {
			height: 12px;
			vertical-align: middle;
		}
		
		.pdficon {
			height: 11px;
			vertical-align: middle;
			
		}

		.lieCardGrammar {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 16px;
			margin: 2px 0 0 0;
		}
		
		.lieCardThumbWrap {
	 
			flex-shrink: 0;
			width: 105px;
			margin: 5px 0px 5px 5px;
			order: 1
			/* no border-radius, no overflow here anymore */
		}

		.lieCardThumb {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 12px;   /* moved here — rounds the image directly */
		}

		.lieCardInfoBtn {
			position: absolute;
			top: 50%;
			right: 6px;
			transform: translateY(-50%);
			width: 28px;
			height: 28px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--lie-info-bg);
			color: var(--lie-info-btn);
			font-family: Georgia, serif;
			font-style: italic;
			font-weight: bold;
			font-size: 12px;
			border-radius: 50%;
			border: 2px solid var(--lie-info-btn);
			cursor: pointer;
			z-index: 3;
		}

		.lieCardBlurb {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 14px 36px 14px 14px;
			background-color: color-mix(in srgb, var(--lie-bg) 94%, transparent);
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica, Arial;
			font-size: 17px;
			line-height: 1.2;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity 0.3s;
			z-index: 2;
		}
		.lieCardBlurb.show {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		.lieStripPanel {		
			max-width: 1260px;
			margin: 12px auto 14px auto;
			padding: 0 30px;
			background: var(--lie-bg);
			border-radius: 0px;
			box-shadow: var(--lie-shadow-soft);
			overflow: hidden;
		}

		.lieSortBarTop {
			display: flex;
			align-items: center;
			gap: 0px;
			padding: 2px 0px 0px 0px;
			font-family: Calibri, Helvetica;
			font-size: 18px;
			font-weight: 400;
			color: var(--lie-text-primary);
		}
		.lieSortBarTop .advSearch { margin-left: auto; }

		.lieSortBarBottom {
			display: flex;
			align-items: center;
			gap: 0px;
			padding: 0px 0px 6px 0px;
			font-family: Calibri, Helvetica;
			font-size: 18px;
			color: var(--lie-text-primary);
		}
		.lieSortBarBottom .advSearch { margin-left: auto; }

		.lieStrip-outer {
			position: relative;
			padding: 6px 0 4px 0;
		}

		.lieStrip {
			display: flex;
			gap: 10px;
			overflow-x: auto;
			overflow-y: hidden;
			/* scroll-snap-type: x proximity; */
			scroll-padding-left: 0px;
			scroll-padding-right: 0px;
			padding: 2px 0px 8px 0px;   /* side padding clears the arrow buttons */
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;         /* firefox */
		}

		.lieStripAllBtn {
			white-space: nowrap;
		}																		

		
		.lieStrip::-webkit-scrollbar { display: none; }

		.lieStripHeader .advSearch {
			color: var(--lie-tv-primary);
			font-weight: 700;
			text-decoration: none;
		}
		.lieStripHeader .advSearch:hover {
			color: var(--lie-tv-primary-dark);
			text-decoration: underline;
		}

		.lieTile {
			scroll-snap-align: start;
			flex: 0 0 auto;
			width: 120px;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: none;
			border: none;
			font-family: Calibri, Helvetica;
			cursor: pointer;
			padding: 0;
			text-align: center;
		}

		.lieTileImgWrap {
			width: 120px;
			height: 120px;
			border-radius: 12px;
			overflow: hidden;
			opacity: 0.92;
			transform: translateY(0);
			box-shadow: 0 0 0 0 transparent;
			transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
		}
		.lieTile img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.lieTile:hover .lieTileImgWrap,
		.lieTile:focus-visible .lieTileImgWrap {
			opacity: 1;
			transform: translateY(-2px);
		}
		.lieTile:focus-visible { outline: 2px solid var(--lie-tv-primary); outline-offset: 3px; border-radius: 10px; }

		.lieTile.isActive .lieTileImgWrap {
			opacity: 1;
			box-shadow: 0 0 0 3px var(--lie-tv-primary);
		}

		.lieTileName {		
			margin-top: 7px;
			font-family: Calibri, Helvetica;
			font-size: 14px;
			font-weight: 600;
			color: var(--lie-text-emphasis);
			line-height: 1.15;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 96px;
		}
		.lieTileMeta {
			margin-top: 6px;
			font-size: 14px;
			color: var(--lie-text-emphasis);
			
			white-space: nowrap;
		}
		.lieTile.isActive .lieTileName { color: var(--lie-tv-primary-dark); }

		.lieStripArrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 42px;
			height: 42px;
			border-radius: 50%;
			border: 0;
			background: #aaa;
				box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			z-index: 3;
			transition: opacity .15s, box-shadow .15s;
		}
		.lieStripArrow:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.08); }
		.lieStripArrow[disabled] { opacity: 0; pointer-events: none; }
		.lieStripArrow.prev { left: -8px; }
		.lieStripArrow.next { right: -8px; }
		.lieStripArrow svg { width: 14px; height: 14px; }
		.lieStripArrow.prev svg { color: var(--lie-bg); }
		.lieStripArrow.next svg { color: var(--lie-bg); }


																	 







		/************** Lesson section Arrows and Next Lesson Icons ***************/

		.lieTri { width: 11px; height: 11px; margin: 0 3px; vertical-align: middle; transition: transform .15s ease; }
		.lieTri.triRotated { transform: rotate(90deg); }	
		.lieSq { width: 9px; height: 9px; margin: 0 3px; vertical-align: middle; }

		.nextLesson {
		  margin: 0 0 0 -26px;
		  padding: 9px 0 9px 34px;
		  list-style: none;
		  font-size: 19px;
		  position: relative;
		  color: var(--lie-text-primary);
		}

		.nextLesson::before {
		  content: "";
		  position: absolute;
		  left: 0;
		  top: 50%;
		  transform: translateY(-50%);
		  width: 26px;
		  height: 26px;
		  background: currentColor;
		  -webkit-mask: var(--lie-next-icon) no-repeat center / contain;
		  mask: var(--lie-next-icon) no-repeat center / contain;
		}

		
		.logohero { display: block; width: 340px; margin: auto; }
		body.dark-theme .logohero { content: url(https://www.listeninenglish.com/sitimg/logo3.svg); }








		/**************************************************************************************************************************************************************************************
		info page setup
		**************************************************************************************************************************************************************************************/


		/****************iteacher, iabout, iorigin, icontact setup*********************/

		#ipage {
			width: 1200px;
			background-color: var(--lie-bg);
		}

		.infopage {
			width: 800px;
			padding: 0px 0px 0px 0px;
			margin: 54px auto 0px auto;
			background-color: var(--lie-bg);
			box-shadow: none;	
		}		
			
		.left-contact {
				float: left;
				width: 400px;
				margin: 0 0 0 60px;
		}

		.right-contact {
				margin: 0px 0px 0px 500px;
				width: 580px;
		}

		.contactLogo {	
			display: block; 
			width: 300px; 
			margin: auto;
		}
		
		

		.right-contact a { color: var(--lie-acad-primary); }
		.right-contact a:visited { color: var(--lie-acad-primary); }
		.about-nav a, .about-nav a:visited { color: var(--lie-text-emphasis); }
		.new-heading {
			font-family: Calibri, Arial, sans-serif;
			font-size: 18px;
			color: var(--lie-text-emphasis);
			background-color: var(--lie-bg-subtle);
			padding: 6px 10px;
			margin-top: 6px;
			cursor: pointer;		
		}
		.new-item {
			font-family: Courier New;
			font-size: 15px;
			color: var(--lie-text-emphasis); 
			margin: 20px 0px 20px 15px;
		}	
		.new-date {
			font-family: Courier New, monospace;
			font-size: 12px;
			font-weight: bold;
			color: var(--lie-text-muted);
			margin-bottom: 5px;
		}
		.whatsnew-scroll {
			max-height: 280px;
			overflow-y: auto;
			border: 1px solid var(--lie-border);
			border-radius: 3px;
			padding: 0 12px;
			margin: 8px 0 16px 0;
			background: var(--lie-bg-subtle);
		}
		.toggle-inner {
			background: var(--lie-bg-subtle);
			border: 1px solid var(--lie-border);
			border-radius: 3px;
			padding: 0 12px;
			margin: 8px 0 16px 0;
		}
		.lie-form {
			margin: 16px 0 8px 20px;
		}
		.lie-form label {
			display: block;
			font-family: Calibri, Arial, sans-serif;
			font-size: 15px;
			font-weight: bold;
			color: var(--lie-text-muted);
			margin-bottom: 5px;
		}
		.lie-form input[type="text"],
		.lie-form select,
		.lie-form textarea {
			width: 100%;
			box-sizing: border-box;
			font-family: Calibri, Arial, sans-serif;
			font-size: 15px;
			color: var(--lie-text-emphasis);
			background: var(--lie-bg);
			border: 1px solid var(--lie-border);
			border-radius: 3px;
			padding: 8px 10px;
			margin-bottom: 14px;
		}
		.lie-form textarea {
			resize: vertical;
		}
		.lie-form input[type="text"]:focus,
		.lie-form select:focus,
		.lie-form textarea:focus {
			outline: none;
			border-color: var(--lie-accent-blue);
		}
		.lie-submit {
			font-family: Calibri, Arial, sans-serif;
			font-size: 15px;
			font-weight: bold;
			background-color: var(--lie-accent-blue);
			color: var(--lie-bg);
			border: none;
			border-radius: 3px;
			padding: 9px 24px;
			cursor: pointer;
		}
		.lie-submit:hover {
			background-color: var(--lie-accent-blue);
		}

		#ipage .toggle-inner ul {
			font-size: 16px;
			line-height: 1.4;
			list-style: none;
			padding-left: 0;		
		}

		#ipage .toggle-inner ul li {
			font-size: 16px;
			margin-top: 2px;
			margin-bottom: 2px;
			position: relative;		
			padding-top: 2px;
			padding-bottom: 7px;
			padding-left: 33px;
		}


		#ipage .toggle-inner ul li::before {
			content: "•";
			position: absolute;
			left: 18px;
		}

		#ipage p {
			line-height: 1.4;
		}
		












		/*******************************************************************************************
		Lesson page setup
		*******************************************************************************************/



		/*************************************/
		.activitydescription {
			display: inline-block;
			position: relative;
			width: 650px;
			height: 260px;
			padding: 5px 10px 5px 15px;
			margin: 0px 10px 10px 0px;
			border-radius: 8px;	
			vertical-align: top;
			background-color: var(--lie-bg);
			box-shadow: var(--lie-shadow-soft);	
		}

		.activitysection {
			vertical-align: top;
			width: 650px;
			background-color: var(--lie-bg);
			box-shadow: var(--lie-shadow-soft);	
			border-radius: 8px;		
			padding: 8px 10px 1px 15px;
			margin: 8px 0px 8px 0px;
		}

		.activitysection > a {
			cursor: pointer;
		}

		.pcactivitypic {
			display: inline-block;
			width: 485px;
			height: 175px;
			vertical-align: top;
			padding: 0px;
			margin: 0px;
		}

		.handactivitypic {
			display: none;
		}

		.triRotated { display: inline-block; transform: rotate(90deg); }

		.activitysection > div[id] { animation: sectionIn 0.3s ease; }
		@keyframes sectionIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }



		/**************** audio/video player setup *********************/

		.videoframe {
			display: inline-block;
			position: fixed;
			width: 480px;
			height: 270px;
			vertical-align: top;

			padding: 0px;
			box-shadow: var(--lie-shadow-soft);	
			margin: auto;
			z-index: 10;
			}

		.audioframe	{
			display: inline-block;
			position: fixed;
			width: 485px;
			height: 268px;
			vertical-align: top;

			padding: 0px;
			box-shadow: var(--lie-shadow-soft);
			border: 1px solid var(--lie-text-emphasis);
			margin: auto;
			z-index: 10;	
			}
			
		.player {
			position: relative;
			width: 100%;
			height: 60px;
			margin: 0px;
			padding: 0px;
			z-index: 1;
			}

		.inplayer {
			position: relative;
			width: 250px;
			height: 30px;
			margin: 25px 0px 5px 0px;
			padding: 0px;
			z-index: 1;
			}
			
			
		#hsticky {
			width: 100%;
			background-color: var(--lie-bg);
			padding: 0px 0px 0px 0px;
		}

		#psticky {
			width: 100%;
			background-color: var(--lie-bg);
			padding: 0px 0px 0px 0px;
		}




		/**************** Desktop background picture setup **************/

		.videotable {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 16px;
			font-weight: normal;
			text-align: center;
		}
			
		.videopics {
			width: 100px;
			border: none;
			margin-top: 5px;
			margin-bottom: 5px;
			margin-left: 5px;
			margin-right: 5px;

			padding-top: 0px;
			padding-bottom: 0px;
			padding-left: 0px;
			padding-right: 0px;
		}

		.knownInfo {
			color: var(--lie-text-muted);

		}


			
		/****************icon set up*************************/

		.bigicon	{
			float: left;
			width: 48px;
			padding: 7px 15px 8px 5px;
			}

		.icon	{
			float: left;
			width: 46px;
			padding: 6px 12px 0px 3px;
			}

		.indexicon {
			float: left;
			width: 42px;
			padding: 8px 10px 0px 3px;
			}	
			
		.audiovideoicon	{
			width: 14px;
			vertical-align: -10%;
			}


			

		/**************** Vocabulary setup - checkboxes + image popups ************************/

		.vocabCheckNote {
			margin: 0 0 12px 0;
			font-size: 16px;
			font-style: italic;
			color: var(--lie-text-muted);
		}
		
		.vPos {
			font-weight: normal;
			font-size: 0.90em;
			position: relative;
			top: 1px;			
			margin: 0 1px;
		}	
		 
		.pos {
			font-size: 15px; 
		 }
	
		.Evcb {
				display: none;
				color: var(--lie-text-primary);
		}

		.vocabli {	
			list-style-type: none;
			margin: 0px 0px 0px 0px;
			z-index: 5;
		}
			
		.vcbHid {
			visibility: hidden;
		}
			
		.vcbCheck {
			position: relative;
			display: inline-block;
			left: -28px;
			margin: 2px -24px 2px 0px;
			color: var(--lie-text-primary);
		}

		.vcbCheck label {
			cursor: pointer;
			position: absolute;
			width: 14px;
			height: 14px;
			top: 5px; left: 0px;
			border-radius: 4px;
			box-shadow: inset 0px 1px 1px var(--lie-bevel-dark), 0px 1px 0px var(--lie-bevel-light);
			background: linear-gradient(to top, var(--lie-checkbox-grad-start) 0%, var(--lie-checkbox-grad-end) 100%);
		}

		.vcbCheck label:after {
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: alpha(opacity=0);
			opacity: 0;
			content: '';
			position: absolute;
			width: 7px;
			height: 3px;
			background: transparent;
			top: 3px;
			left: 2px;
			border: 3px solid var(--lie-tv-primary);
			border-top: none;
			border-right: none;
			z-index: 5;
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

		.vcbCheck input[type=checkbox]:checked + label:after {
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha(opacity=100);
			opacity: 1;
			z-index: 5;
		}


		.popup {
			position: relative;
			display: inline-block;
			cursor: pointer;
		}

		.popup .vpopup  {
			visibility: hidden;
			width: 200px;
			background-color: var(--lie-text-muted);
			margin: auto;
			border-radius: 3px;
			padding: 5px 5px 1px 5px;
			position: absolute;
			z-index: 1;
			bottom: 125%;
			left: 50%;
			margin-left: -80px;
		}

		.popup .vpopup::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -27px;
			border-width: 5px;
			border-style: solid;
			border-color: var(--lie-text-muted) transparent transparent transparent;
		}

		.popup .show {
			visibility: visible;
			-webkit-animation: fadeIn 1s;
			animation: fadeIn 1s
		}

		@-webkit-keyframes fadeIn {
			from {opacity: 0;} 
			to {opacity: 1;}
		}

		@keyframes fadeIn {
			from {opacity: 0;}
			to {opacity:1 ;}
		} 




		/************ lesson card setup *****************/	

		.sActTitles	{
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 17px;
			font-weight: normal;
			text-shadow: none;
			margin: 0px;
			}


		.aDescriptors	{
			color: var(--lie-text-muted);
			font-family: Calibri, Helvetica;
			font-size: 13px;
			font-weight: normal;
			text-shadow: none;
			line-height: 1.3;
			margin: 0px;
			padding: 0px 0px 0px 15px;
			}

		.aDescripText {
			margin: 10px 0px;
			}

		.aBlurb	{
			margin: 50px 0px 0px 0px;
			}

		.activityNumber {
			font-size: smaller;
			font-weight: 800;
			}

		.updated {
			font-size: smaller;
			font-weight: 800;
			}




		.share {
			position: absolute;
			bottom: 10px;
			width: 95%;
		}

		.reload {
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica, Helvetica;
			font-weight: 800;
			font-size: 20px;
		}

		.downloadTable {
			font-family: Calibri; 
			font-size: 17px; 
			border-top: solid var(--lie-easy-primary) 0px;
			padding: 0 0 0 0;
			margin:	10px 0 0 0;		

		}
			
		.downloadTable td {
		  padding: 0 15px 0 0;
		}




		/*************** Directions Setup *******************************/

		.directionsFlagsBox {
			float: right;
			display: inline-block;
			padding: 10px 0 0 0;
		}

		.directionsLanguageFlag {
			width: 26px;
			vertical-align: center;
		}

		.directTitle {
			font-size: 19px;
		}

		.directExplain {
			font-size: 16px;
			padding: 3px 0px 3px 0px;
		}

		.tips {
			padding: 0 0 5px 0;
		}

		.ktips {
			line-height: 24px;
			font-size: 16px;	
			padding: 0 0 5px 0;
		}

		.black {
			color: var(--lie-text-emphasis);
		}




		
			
		/**************** Slider / Button Toggle ******************/
		
		#repeat .lrHeader{ display: flex; justify-content: flex-end; align-items: center; margin: 0 10px 8px 8px; font-size: 0.9rem; font-family: Calibri, Arial, sans-serif; }
		#repeat .lrModeToggle a{ color: var(--lie-text-muted); text-decoration: none; cursor: pointer; }
		#repeat .lrModeToggle a.active{ color: var(--lie-text-emphasis); font-weight: bold; text-decoration: underline; }
		#repeat .lrModeToggle .sep{ color: var(--lie-border); margin: 0 5px; }

		#repeat .lrButtons{ margin: 0 0 10px 0; }
		#repeat .revealControls{ display: none; }
		#repeat.sliderMode .revealControls{ display: flex; }
		#repeat.sliderMode .lrButtons{ display: none; }



		/**************** Summary Slider ******************/


		.sumSentence	{
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 17px;
			font-weight: bold;
			text-shadow: none;
			margin: 0px 0px 2px 0px;
		}

		.revealWrapper {
		  position: relative;
		  width: 95%;
		  margin: 10px 0 10px 8px;
		}

		.revealText {
		  white-space: pre-line;			
		  word-break: break-word;
		  line-height: 1.3;
		  color: var(--lie-reveal-blue);
		  font-size: 110%;
		  width: 95%;
		  margin: 6px 0 6px 8px;
		  display: block; 
		}

		.revealText .char {
		  visibility: hidden;
		}

		.revealText .char.shown {
		  visibility: visible;
		}

		.revealPct {
			color: var(--lie-text-primary);
		}
		
		.revealControls {
		  display: flex;
		  align-items: center;
		  gap: .5rem;
		  margin: 0 0 10px 0;
		}

		.revealSlider {
		  -webkit-appearance: none;
		  appearance: none;
		  background: transparent;
		  width: 100%;
		  touch-action: pan-y;
		  cursor: pointer;
		  height: 0.4rem;
		  border-radius: 0.2rem;
		  accent-color: var(--lie-tv-primary);
		  --progress: 0%;
		}

		.revealSlider::-webkit-slider-runnable-track {
		  height: 0.4rem;
		  border-radius: 0.2rem;
		  background: linear-gradient(
			to right,
			var(--lie-progress-fill) 0%,
			var(--lie-progress-fill) var(--progress, 0%),
			var(--lie-progress-track) var(--progress, 0%),
			var(--lie-progress-track) 100%
		  );
		}

		.revealSlider::-moz-range-track {
		  height: 0.4rem;
		  border-radius: 0.2rem;
		  background: var(--lie-progress-track);
		}

		.revealSlider::-moz-range-progress {
		  height: 0.4rem;
		  border-radius: 0.2rem;
		  background: var(--lie-progress-fill);
		}

		.revealSlider::-webkit-slider-thumb {
		  -webkit-appearance: none;
		  appearance: none;
		  width: 2.4rem;
		  height: 1.2rem;
		  border-radius: 8%;
		  background: var(--lie-tv-primary);
		  box-shadow: 0 2px 6px rgba(0,0,0,.25);
		  cursor: pointer;
		  position: relative;
		  z-index: 1;
		  margin-top: -0.4rem;
		}

		.revealSlider::-moz-range-thumb {
		  width: 2.4rem;
		  height: 1.2rem;
		  border-radius: 8%;
		  background: var(--lie-tv-primary);
		  border: none;
		  box-shadow: 0 2px 6px rgba(0,0,0,.25);
		  cursor: pointer;
		}

		.revealSlider:focus {
		  outline: none;
		}

		.revealSlider:focus-visible::-webkit-slider-thumb,
		.revealSlider:focus-visible::-moz-range-thumb {
		  box-shadow: 0 0 0 4px rgba(0,153,153,.25),
					  0 2px 6px rgba(0,0,0,.25);
		}

		.revealSlider:hover::-webkit-slider-thumb,
		.revealSlider:hover::-moz-range-thumb {
		  filter: brightness(1.05);
		}

		.revealSlider:active::-webkit-slider-thumb,
		.revealSlider:active::-moz-range-thumb {
		  transform: scale(0.96);
		}

		.revealSlider:disabled {
		  opacity: .5;
		  cursor: not-allowed;
		}

		.revealSlider:disabled::-webkit-slider-thumb,
		.revealSlider:disabled::-moz-range-thumb {
		  background: var(--lie-border);
		  box-shadow: 0 1px 3px rgba(0,0,0,.15);
		}


		/****************Pop Up Explanation (summary, listen & repeat)******************/

		.sumExp  {
			border-radius: 3px;
			padding: 8px 8px 8px 8px;
			position: absolute;
			z-index: 1;
			
			visibility: hidden;
			width: 300px;
			margin: 0px 0px 0px 10px;
			bottom: 50%;	
			background-color: var(--lie-tv-primary-bg);
			border: 1px solid var(--lie-text-primary);
			
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 15px;
		}

		.sumBut {
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 14px;
			vertical-align: top;
		}


		.tipExp  {
			border-radius: 3px;
			padding: 8px 8px 8px 8px;
			position: absolute;
			z-index: 1;			
			visibility: hidden;
			width: 380px;
			margin: 0px 0px 0px 10px;
			bottom: 50%;	
			background-color: var(--lie-tv-primary-bg);
			border: 1px solid var(--lie-text-primary);			
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 15px;
		}


		.tipBut {
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 14px;
			vertical-align: top;
			
			
		}



		/**************** scoremeters ***************/
		
		.fb { margin-left:8px; font-weight:700; }
		.ok  { color:var(--lie-success);  }
		.bad { color:var(--lie-error);  }

		#scoreMeter { margin-top:10px; font-weight:600; }
		#scoreMeter2 { margin-top:10px; font-weight:600; }
		#clozeScoreMeter { margin-top:10px; font-weight:600; }
		#grammarScoreMeter { margin-top:10px; font-weight:600; }		

		.gwrap.correct input { border:2px solid var(--lie-success); background:var(--lie-success-bg); }
		.gwrap.incorrect input { border:2px solid var(--lie-error); background:var(--lie-error-bg); }
		.gresult { margin-left:2px; font-weight:700; }



		/**************** Details / Vocab Review Show Hide *************/
		.answerText {
			width: 90%;
			padding: 4px 0px 4px 6px;
			margin: 2px 0px 6px 5px;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.4s;
		}
		.answerText.shown {
			opacity: 1;
			color: var(--lie-reveal-blue);
			visibility: visible;
		}




		/**************** Grammar error-correction Hint show/hide ******************/
		.ghint {
			visibility: hidden;
		}
		.ghint.hintVisible {
			visibility: visible;
		}



		/****************   Grammar dropdown ******************/
		.gcfb { display: inline-block; font-weight: bold; margin-left: 4px; font-size: 13px; }
		.gcfb.ok  { color: #2a8f2a; }
		.gcfb.bad { color: var(--lie-error); }
		.gcheckScore { font-size: 17px; }
		select.gcOk  { border: 2px solid #2a8f2a; }
		select.gcBad { border: 2px solid var(--lie-error); }
		
		

		/****************  Story Order ******************/

		.storyOrder{ margin: 8px 0 4px; }

		.soHeader{ display: flex; justify-content: flex-end; align-items: center; margin:0 10px 0 8px; font-size: 0.9rem; font-family: Calibri, Arial, sans-serif; }
		.soModeToggle a{ color: var(--lie-text-muted); text-decoration: none; cursor: pointer; }
		.soModeToggle a.active{ color: var(--lie-text-emphasis); font-weight: bold; text-decoration: underline; }
		.soModeToggle .sep{ color: var(--lie-border); margin: 0 5px; }

		.soList{ list-style: none; margin: 0; padding: 0; }

		.soItem{ display: flex; align-items: stretch; gap: 4px; margin: 4px 0; }

		.soNum{
			flex-shrink: 0; width: 26px; display: flex; align-items: center; justify-content: center;
			background: var(--lie-bg-subtle); border: 0px solid var(--lie-border); border-radius: 2px;
			font-size: 0.9rem; color: var(--lie-text-muted); font-weight: bold;
		}

		.soCard{
			flex: 1; display: flex; overflow: hidden;
			border: 1px solid var(--lie-border); border-radius: 2px 6px 6px 2px; background: var(--lie-bg-subtle);
		}
		.soBody{ flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 5px 6px 5px 12px; }
		.soText{ flex: 1; line-height: 1.45; font-size: 1.1rem; }

		.soControls{ flex-shrink: 0; width: 30px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
		.soUp, .soDown{
			width: 30px; height: 25px; font-size: 11px; line-height: 1;
			border: 1px solid var(--lie-text-muted); border-radius: 5px; background: var(--lie-bg);
			cursor: pointer; padding: 0;
		}
		.soUp:active, .soDown:active{ background: var(--lie-bg-subtle); }

		.soHandle{
			display: none; width: 30px; height: 55px; align-items: center; justify-content: center;
			cursor: grab; touch-action: none; color: var(--lie-text-muted);
		}
		.soHandle svg{ pointer-events: none; }
		.storyOrder.dragMode .soUp,
		.storyOrder.dragMode .soDown{ display: none; }
		.storyOrder.dragMode .soHandle{ display: flex; }

		.soItem.dragging .soCard{ background-color: var(--lie-text-muted); color: var(--lie-bg); }
		.soItem.correct .soCard{ background: var(--lie-success-bg); border-color: var(--lie-success); }
		.soItem.wrong .soCard{ background: var(--lie-error-bg); border-color: var(--lie-error); }
		.soScore{ font-weight: bold; }




		/**************** TOEFL 2026 Input ******************/

		.cloze-para {
		  font-family: Calibri, Arial, sans-serif;
		  font-size: 19px;
		  line-height: 1.3;  
		  padding: 5px 10px 5px 10px; 
		  background-color: var(--lie-bg-subtle)
		}

		.cloze-wrap { 
		  display: inline-flex; 
		  font-family: Consolas;
		  font-size: 17px;
		  align-items: center; 
		  gap: .09rem; 
		  padding: 0 .1rem; 
		  margin: 0 .30rem; 
		  position: relative; 
		}

		.cloze-input { 
		  width: 0.9rem; 
		  border: none; 
		  border-bottom: 2px solid var(--lie-accent-blue); 
		  text-align: center; 
		  font: inherit; 
		  outline: none; 
		  background: none; 
		}

		.cloze-input:focus { 
		  border-bottom-color: var(--lie-accent-blue); 
		  box-shadow: 0 1px 0 0 rgba(37,99,235,.15); 
		}

		.cloze-prefix, .cloze-suffix { letter-spacing: 0.22em; }

		.cloze-result {
		  font-size: .85rem; 
		  margin-left: .25rem; 
		  display: none; 
		}

		.cloze-wrap.correct { 
		  background: var(--lie-success-bg); 
		  box-shadow: inset 0 0 0 2px #10b98122; 
		  border-radius: 8px; 
		}

		.cloze-wrap.correct .cloze-result { 
		  color: var(--lie-success); 
		  display: inline; 
		}

		.cloze-wrap.incorrect { 
		  background: var(--lie-error-bg); 
		  box-shadow: inset 0 0 0 2px #ef444422; 
		  border-radius: 8px; 
		}

		.cloze-wrap.incorrect .cloze-result { 
		  color: var(--lie-error); 
		  display: inline; 
		}


		.cloze-input.filled {
		  width: 0.55rem;

		}

		.convo-questions {
			position: relative;
			min-height: 60px;
		}
		.cq-overlay {
			position: absolute;
			inset: 0;
			background: rgba(240, 244, 252, 0.82);
			backdrop-filter: blur(3px);
			-webkit-backdrop-filter: blur(3px);
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			gap: 6px;
			z-index: 10;
			user-select: none;
		}
		.convo-questions.cq-visible .cq-overlay {
			display: none;
		}
		.cq-toggle-btn {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 7px 14px;
			margin: 8px 0;
			border: 1px solid var(--lie-text-muted);
			border-radius: 6px;
			background: var(--lie-accent-blue);
			color: #fff;
			font-size: 0.88rem;
			cursor: pointer;
		}
		.cq-toggle-btn.cq-visible {
			border-color: var(--lie-accent-blue);
			background: var(--lie-accent-blue);
			color: #fff;
		}
		.cq-overlay-msg {
			font-size: 1rem;
			color: var(--lie-accent-blue);
			font-weight: 600;
			text-align: center;
		}
		.cq-overlay-sub {
			font-size: 0.8rem;
			color: var(--lie-text-muted);
		}


		 
		/****************PC Vocab Accuracy <li> formatting**************/
		.vocabexplain {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 14px;
			font-style: italic;
			font-weight: bold;
			margin: 5px 0px 20px 10px;
		}

		.grammarparagraph {
			border: 1px solid var(--lie-text-primary);
			line-height: 1.6;
			padding: 6px 10px 6px 10px;
			margin: 6px 4px;
		}


		ul.ulPreps li {
			margin-bottom: 10px;
			line-height: 1.3;
		}




		/****************American English File*******************/


		.sectionMargin {
			padding: 10px 0px 0px 15px;
		}

		.roleplayCard {
			border: 1px solid var(--lie-error);
			padding: 6px 3px 0px 10px;			
		}

		.roleplayTitle {
			color: var(--lie-error);		
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 20px;
			font-weight: bold;			
		}
		
		.diaSpeaker	{
			color: var(--lie-error);
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 16px;
			text-transform: uppercase;
		}

		.diaBullet	{
			margin: 20px 0px 2px -25px;
			font-size: 20px;
			list-style-type: none;			
		}

		.rewriteOrigin	 {
			color: var(--lie-error);		
			padding: 2px 0px;
		}
		
		.tr3 {
			color: var(--lie-reveal-blue);
			text-decoration: underline;
			text-decoration-color: var(--lie-reveal-blue);		
		}

		.tr3.dpHidden {
			color: var(--lie-reveal-blue-dark, var(--lie-reveal-blue-dark));
			text-decoration: none;
		}

		
		.tr4 {
			color: var(--lie-bg-subtle);
			text-decoration: underline;
			text-decoration-color: var(--lie-reveal-blue);	
		}	

		.tr6 {
			color: var(--lie-bg-subtle);
			text-decoration: underline;
			text-decoration-color: var(--lie-reveal-blue);		
		}

		.red {
			color: var(--warn-red);
		}

		ol.grammarCheck li {
			padding-bottom: 20px;
		}

		.gramExample {
			font-family: Times New Roman; 
			font-size: 16px; 
			padding: 0 0 0 6px;
		}


		.iHidden {
			opacity: 0;
			visibility: hidden;
		}
		
		.iShowhide {
			color: var(--lie-reveal-blue);
			padding: 4px 0px 4px 6px;
			margin: 2px 0px 6px 5px;
			transition: opacity 0.4s;
		}

			
		/****************answer buttons setup*******************/

		.answers {
			background-color: var(--lie-border);
			border: none;
			border-radius: 4px;
			color: #fff;
			padding: 7px 12px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 14px;
			margin: 4px auto;
			cursor: pointer;
			transition: all 0.5s;
			position: relative;
		}

		.answers::before {
		  content: '';
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 1;
		  background-color: rgba(255,255,255,0.2);
		  transition: all 0.5s;
		}
		.answers:hover::before {
		  opacity: 0 ;
		  transform: scale(0.5,0.5);
		}


		.answerdiv {
			margin: 0px 5px;
			}

		.bkgd {
		  margin: 0 2px 0 2px;
		  background-color: transparent;
		  color: transparent;        /* hides the text */
		  border-bottom: 1px solid var(--lie-border);  /* optional underline so the space is visible */
		}

		.bkgd.show {
		  color: var(--lie-easy-primary);            /* show original text */
		 
		}

		.dd-ans{
			display: 		none;
			font-size:		16px;
			margin-left: 	4px;
		}

		.dd-show .dd-ans{
			display:		inline;
		}

		.dd-ok{
			outline: 		1.5px solid var(--lie-success);
			background: 	var(--lie-success-bg);
		}

		.dd-bad{
			outline:		2.8px solid var(--lie-error);
			background:		var(--lie-error-bg);
		}





			
		/****************Listen & Repeat setup************************/

		.previewPlayer {
			display: inline;
			margin: 2px; 
			width: 80px; 
			height: 25px;
			}


		.repeatPlayer {
		  margin: 2px auto 0px auto; 
		  width: 95%; 
		  height: 25px;
		}

		body.dark-theme .repeatPlayer {
		  color-scheme:  dark;
		}

		.repeatText {
			width: 90%;
			background-color: var(--lie-bg);
			color: var(--lie-bg);
			padding: 4px 0px 4px 6px;
			margin: 2px 0px 6px 5px;
			transition: all 0.4s;	
			}
			
		.wordList {
			width: 90%;
			background-color: var(--lie-bg);
			color: var(--lie-bg);
			padding: 3px 0px 3px 10px;
			margin: 8px 0px -6px 5px;	
			}
			
		.hint {
			background-color: var(--lie-bg);
			color: var(--lie-bg);
			padding: 2px 0px 3px 5px;
			margin: 2px 0px 3px 0px;	
			}	

		.sumInput {
			width: 100%;
			margin: 3px 0px 0px 0px;
			padding: 8px 10px;
			border: 1px solid var(--lie-border);
			border-radius: 4px;
			background-color: var(--lie-input-bg);
			color: var(--lie-text-primary);
			font-family: Garamond;
			font-size: 16px;
			box-sizing: border-box;
			}

		.sumInput:focus {
			outline: none;
			border-color: var(--lie-accent-teal);
			box-shadow: 0 0 0 2px color-mix(in srgb, var(--lie-accent-teal) 30%, transparent);
			}		
			



			
		/****************Compare to the Text************************/	
			
		.text {	
			font-family: Georgia;
			font-size: 16px;	
			font-weight: normal;
			line-height: 160%;
			color: var(--lie-text-emphasis);
			padding: 8px 18px;
		}	

		.textTitle {	
			font-family: Georgia;
			font-size: 17px;	
			font-weight: bold;
			font-variant: small-caps;
			line-height: 160%;
			color: var(--lie-text-emphasis);
			padding: 8px 18px;
		}

		.tstamp {	
			font-family: 'Berkshire Swash', cursive;
			font-size: 16px;	
			font-weight: normal;
			line-height: 160%;
			padding: 0px 5px 0px 0px;
			text-align: center;
		}


		.booktitle {	
			font-family: centauri , cursive;
			font-size: 16px;	
			font-weight: normal;
			line-height: 160%;
			padding: 0px 5px 0px 0px;
		}

		.prTense {
			font-family: Calibri, Helvetica, Helvetica;
			font-weight: normal;
			color: var(--warn-red);
			padding: 0px 0px 0px 0px;
			font-size: smaller;	
		}



		hr.bookHr {
			border: 0;
			height: 1px;
			width: 90%;
			margin: 10px auto;
			background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--lie-divider-fade), rgba(0, 0, 0, 0));
		}


		.dpractice {
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 14px;	
			font-weight: normal;
			color: grey;	
			padding: 0px 0px 0px 0px;
			vertical-align: 10%;
		}


			
		/****************scriptbox setup************************/
		.scriptbox {
			width: 90%;
			background-color: var(--lie-bg);
			padding: 0px 10px 10px 10px;
			margin: 20px auto 10px auto;
			}

		.scripttime {
			display: block; 
			width: 100%; 
			padding: 0 0 0 5px; 
			margin: 0 0 8px -15px; 
			background: var(--lie-tv-primary); 
			color: var(--lie-bg); 
			font-size: smaller;
		}


		/****************listen & draw setup**************/
		.drawing {
			width: 560px;
			border: 1px solid var(--warn-red);
			margin: 10px 0px 20px 6px;
			padding: 0px 0px 0px 0px;
			}

		.dict-table {
			width: 550px;
			font-family: Calibri, Helvetica;
			font-size: 16px;
			font-weight: normal;
			color: var(--lie-text-primary);
		}	

		.shapes {
			height: 60px;
			margin: 2px 10px 2px 10px;
		}

			
		/**************** Desktop Activitiy Visible ****************/

		.toggle {	
			display: none;
			}

		.ans3 {
				display: none;
				}

		.ans4 {
				display: none;
				}

		.ans5 {
				display: none;
				}		

		.ans6 {
				display: none;
				}
				
		.ans7 {
				display: none;
				}
				
		.ans8 {
				display: none;
				}
				
		.ans9 {
				display: none;
				}
				
		.ans10 {
				display: none;
				}

		.ans11 {
				display: none;
				}
				



			/********************article***********************/

			.articles {
				padding: 0px 200px;
			}


			.artPara {
				margin: 25px 0px 15px 0px;
				font-size: 21px;
				font-family: Calibri, Arial;
				color: var(--lie-text-primary);
				line-height: 1.3;
			}

			.listenPara {
				margin: 10px 0px 25px 0px;
				font-size: 19px;
				font-family: Calibri, Arial;
				color: var(--lie-text-primary);
				border-left: 10px var(--lie-border) solid; 
				padding: 0px 15px;
				line-height: 1.3;	
			}

			.artImage {
				margin: 10px 0px;
				width: 100%;
			}

			.artLogo {
				height: 23px; 
				vertical-align: bottom;
			}	
			
			body.dark-theme .artLogo { content: url(https://www.listeninenglish.com/sitimg/logo3.svg); }		






		 
		/****************  Latin & Greek Stems & prefixes ***********************/
		 
		
		/* Stage 1: context-inference fill blanks */
		.rt-context-item { margin-bottom: 22px; }
		.rt-context-item li { font-size: 20px; }
		.rt-context-item .rt-stem-label { font-weight: bold; color: var(--lie-reveal-blue); }
		.rt-context-item p { margin: 6px 0; }
		.rt-blank-row { margin: 15px 0;  }
		.rt-blank-row label { display: inline; font-weight: bold; }
		.rt-infer-icon { vertical-align: middle; margin-right: 4px; var(--lie-reveal-blue); }
		/* Stage 2: reference chart */
		.rt-chart-table { width: 94%; border-collapse: collapse; margin: 14px 0 24px 3%; }
		.rt-chart-table th, .rt-chart-table td {
			border-top: 1px solid var(--lie-border);
			border-bottom: 1px solid var(--lie-border);
			border-left: none;
			border-right: none;
			padding: 8px 10px;
			text-align: left;
			vertical-align: top;
			font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
			font-size: 18px;
			color: var(--lie-text-primary);
		}
		.rt-chart-table th { background: var(--lie-bg-subtle); color: var(--lie-text-emphasis); }
		.rt-chart-table td.rt-icon-cell { text-align: center; width: 46px; }
		.rt-chart-table caption { text-align: left; font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; font-size: 22px; font-weight: bold; margin-bottom: 6px; color: var(--lie-text-primary);}

		body.dark-theme .rt-infer-icon {
			color: #fff;
		}
		
		.rt-icon-cell {
			color: var(--lie-reveal-blue);
		}
		body.dark-theme .rt-icon-cell {
			color: #fff;
		}

		



		/* Stage 3: word-build tiles */
		.rt-build-item {
			border: 1px solid var(--lie-border);
			border-radius: 8px;
			padding: 14px 16px;
			margin-bottom: 20px;
			background: var(--lie-bg-subtle);
		}
		.rt-build-word {
			font-size: 1.15em;
			margin-bottom: 10px;
			color: var(--lie-text-primary);
		}
		.rt-build-target {
			font-weight: bold;
			letter-spacing: 0.5px;
			color: var(--lie-reveal-blue);
		}
		.rt-slots { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
		.rt-slot {
			min-width: 70px;
			min-height: 25px;
			border: 2px dashed var(--lie-text-muted);
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 2px 5px;
			font-size: 1.05em;
			cursor: pointer;
			background: var(--lie-bg);
			text-align: center;
		}
		.rt-slot::before {
			content: attr(data-hint);
			color: var(--lie-border);
			font-style: italic;
			pointer-events: none;
		}
		.rt-slot.rt-filled { border-style: solid; border-color: var(--lie-text-muted); background: var(--lie-bg-subtle); color: var(--lie-text-primary);}
		.rt-slot.rt-filled::before { content: none; }
		.rt-slot.rt-correct { border-color: var(--lie-success); background: var(--lie-success-bg); }
		.rt-slot.rt-incorrect { border-color: var(--lie-error); background: var(--lie-error-bg); }
		.rt-tilebank { display: flex; flex-wrap: wrap; gap: 8px; }
		.rt-tile {
			display: inline-block;
			padding: 6px 12px;
			border: 1px solid var(--lie-text-muted);
			border-radius: 6px;
			background: var(--lie-bg);
			cursor: pointer;
			font-size: 0.92em;
			color: var(--lie-text-primary);
			user-select: none;
		}
		
		.rt-tile:hover { background: var(--lie-bg-subtle); }
		.rt-tile.rt-selected { background: var(--lie-reveal-blue); color: var(--lie-bg); border-color: var(--lie-reveal-blue); }
		.rt-tile.rt-used { opacity: 0.35; cursor: default; pointer-events: none; }
		.rt-build-feedback { margin-top: 8px; font-size: 0.9em; }

		body.dark-theme .rt-build-target,
		body.dark-theme .rt-context-item .rt-stem-label {
			color: #5b9bd5;
		}





		
		/****************  TIMED READING *******************/

		/* ── Page wrapper ── */
		#tr-wrap {
			max-width: 760px;
			margin: 4px auto 0 auto;
			padding: 0px 14px 60px;
		}

		/* ── Override activitysection fixed width within TR ── */
		#tr-wrap .activitysection {
			width: auto;
			margin: 8px 0;
		}

		/* ── Title card ── */
		.activitydescriptionread {
			display: block;
			position: relative;
			padding: 8px 15px 14px 15px;
			margin: 2px 0 0 0;
			border-radius: 8px;
			background-color: var(--lie-bg);
			box-shadow: var(--lie-shadow-soft);
			overflow: hidden;
		}

		.spb-label {
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 0.07em;
			text-transform: uppercase;
			color: var(--lie-border);
			margin: 10px 0 6px;
			font-family: Calibri, Helvetica, Arial;
		}
		
		.spb-dots { display: flex; gap: 5px; flex-wrap: wrap; }
		
		.spb-dot {
			width: 24px; height: 24px;
			border-radius: 50%;
			background: var(--lie-accent-blue);
			border: 2px solid var(--lie-accent-blue);
			display: flex; align-items: center; justify-content: center;
			font-size: 9px; font-weight: 700;
			color: var(--lie-accent-blue);
		}
		
		.spb-dot.done    { background: var(--lie-reveal-blue); border-color: var(--lie-reveal-blue-dark); color: var(--lie-bg); }
		
		.spb-dot.current { background: var(--lie-bg); border-color: var(--lie-reveal-blue); color: var(--lie-reveal-blue); }

		/* ── Directions body ── */
		#tr-directions-body {
			display: none;
			padding: 6px 10px 16px;
			font-size: 16px;
			line-height: 1.65;
			color: var(--lie-text-muted);
			font-family: Calibri, Helvetica, Arial;
		}
		#tr-directions-body.open { display: block; }
		
		#tr-directions-body strong { color: var(--lie-reveal-blue); }

		/* ── Passage card ── */
		.tr-card {
			background: var(--lie-bg);
			box-shadow: var(--lie-shadow-soft);
			border-radius: 8px;
			margin-bottom: 8px;
			overflow: hidden;
		}

		#tr-passage-header {
			padding: 16px 22px;
			border-bottom: 1px solid var(--lie-accent-blue-bg);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* ── Start button & pulse animation ── */
		@keyframes tr-pulse {
			0%   { box-shadow: 0 3px 12px rgba(40,109,168,0.3); }
			50%  { box-shadow: 0 3px 22px rgba(40,109,168,0.7); }
			100% { box-shadow: 0 3px 12px rgba(40,109,168,0.3); }
		}

		#tr-start-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			width: 98%;
			max-width: 300px;
			padding: 12px 24px;
			font-size: 16px;
			font-weight: 700;
			color: var(--lie-bg);
			background: var(--lie-reveal-blue);
			border: none;
			border-radius: 7px;
			cursor: pointer;
			font-family: Calibri, Helvetica, Arial;
			box-shadow: 0 3px 12px rgba(40,109,168,0.3);
			transition: background 0.18s, opacity 0.18s;
		}
		#tr-start-btn:hover:not(:disabled)  { background: var(--lie-reveal-blue-dark); }

		body.s-reading #tr-start-btn {
			animation: tr-pulse 2s ease-in-out infinite;
			opacity: 0.65;
			cursor: default;
		}
		
		body.s-done #tr-start-btn {
			opacity: 0.35;
			cursor: default;
			animation: none;
			box-shadow: none;
		}

		/* ── Passage text ── */
		#tr-passage-card-body { padding: 22px 22px 0; }

		#tr-passage {
			color: var(--lie-accent-blue);
			max-width: 78ch;
			margin: 0 auto;
			font-family: Calibri, Helvetica, Arial;
		}
		#tr-passage p { margin: 0 0 1.15em; font-size: 17px; line-height: 1.9; }
		#tr-passage b {
			color: var(--lie-reveal-blue);
			font-weight: 600;
			border-bottom: 1px dashed var(--lie-accent-blue);
		}

		/* ── Passage footer — stop btn, time report, progress btn ── */
		#tr-passage-footer {
			display: none;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			padding: 16px 22px;
			border-top: 1px solid var(--lie-accent-blue-bg);
			margin-top: 20px;
		}

		#tr-stop-btn {
			display: none;
			width: 98%;
			max-width: 300px;
			padding: 12px 24px;
			font-size: 16px;
			font-weight: 700;
			color: var(--lie-bg);
			background: var(--lie-error);
			border: none;
			border-radius: 7px;
			cursor: pointer;
			font-family: Calibri, Helvetica, Arial;
			box-shadow: 0 3px 12px rgba(192,57,43,0.3);
			transition: background 0.18s;
		}
		
		#tr-stop-btn:hover { background: var(--lie-error); }
		body.s-reading #tr-stop-btn { display: block; }

		#tr-reading-time-report {
			display: none;
			font-size: 16px;
			color: var(--lie-text-muted);
			font-family: Calibri, Helvetica, Arial;
			text-align: center;
		}
		
		body.s-done #tr-reading-time-report { display: block; }

		#tr-view-progress-btn {
			display: inline-block;
			padding: 5px 24px;
			font-size: 13px;
			font-family: Calibri, Helvetica, Arial;
			background: var(--lie-reveal-blue);
			color: var(--lie-bg);
			border: 1px solid var(--lie-accent-blue);
			border-radius: 6px;
			cursor: pointer;
			white-space: nowrap;
			transition: background 0.15s;
			margin: 0;
		}

		#tr-progress-updated {
			display: none;
			font-size: 15px;
			color: var(--lie-border);
			font-family: Calibri, Helvetica, Arial;
			text-align: center;
		}
		
		body.s-done #tr-progress-updated { display: block; }

		/* ── Passage overlay ── */
		#tr-passage-card { position: relative; }
		#tr-passage-overlay {
			display: none;
			position: absolute;
			inset: 0;
			background: rgba(232,240,248,0.65);
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
			border-radius: 8px;
			z-index: 10;
			align-items: center;
			justify-content: center;
			text-align: center;
			flex-direction: column;
			gap: 6px;
			padding: 20px;
			font-family: Calibri, Helvetica, Arial;
		}
		
		.ov-msg { font-size: 17px; font-weight: 700; color: var(--lie-reveal-blue); }
		.ov-sub { font-size: 14px; color: var(--lie-text-muted); }
		body.s-reading #tr-passage-footer { display: flex; }
		body.s-done #tr-passage-overlay { display: flex; }
		body.s-done #tr-passage-footer { display: flex; position: relative; z-index: 11; background: var(--lie-bg); }

		/* ── Questions section body ── */
		#tr-questions-body {
			display: none;
			padding: 6px 15px 16px;
		}
		#tr-questions-body.open { display: block; }

		/* ── Vocab section body ── */
		#tr-vocab-body {
			display: none;
			padding: 6px 15px 16px;
		}
		#tr-vocab-body.open { display: block; }

		.vc-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 11px; }
		.vc-word { font-weight: 700; color: var(--lie-reveal-blue); min-width: 100px; flex-shrink: 0; font-family: Calibri, Helvetica, Arial; font-size: 15px; }
		.vc-opts { display: flex; gap: 6px; flex-wrap: wrap; }
		.vc-opt {
			padding: 4px 12px;
			border: 1px solid var(--lie-border);
			border-radius: 20px;
			background: var(--lie-bg-subtle);
			cursor: pointer;
			font-size: 14px;
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica, Arial;
			white-space: nowrap;
			transition: background 0.13s, border-color 0.13s;
			user-select: none;
		}
		.vc-opt:hover { background: var(--lie-accent-blue); border-color: var(--lie-accent-blue); }
		.vc-opt.sel   { background: var(--lie-reveal-blue); color: var(--lie-bg); border-color: var(--lie-reveal-blue); }
		.vc-opt.ok    { background: var(--lie-success); color: var(--lie-bg); border-color: var(--lie-success); }
		.vc-opt.bad   { background: var(--lie-error); color: var(--lie-bg); border-color: var(--lie-error); }
		.vc-opt.key   { background: var(--lie-success-bg); color: var(--lie-success); border-color: var(--lie-success); font-weight: 700; }

		#tr-wrap .answers { color: #fff; border-radius: 6px; font-weight: 600; cursor: pointer; }

		/* ── Listen section body ── */
		#tr-listen-body { display: none; }
		#tr-listen-body.open { display: block; }


		/* ── Rating colours (modal) ── */
		.r-dev  { background: var(--lie-error-bg); color: var(--lie-error); }
		.r-avg  { background: var(--lie-easy-primary-bg); color: var(--lie-easy-primary); }
		.r-good { background: var(--lie-success-bg); color: var(--lie-success); }
		.r-vgd  { background: var(--lie-accent-blue); color: var(--lie-accent-blue); }
		.r-exc  { background: var(--lie-acad-primary-bg); color: var(--lie-acad-primary); }

		/* ── Modal ── */
		#tr-modal-overlay {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(10,20,50,0.55);
			z-index: 500;
			align-items: center;
			justify-content: center;
			padding: 16px;
		}
		
		#tr-modal {
			background: var(--lie-bg);
			border-radius: 12px;
			max-width: 420px;
			width: 100%;
			padding: 18px 22px 14px;
			box-shadow: 0 20px 60px rgba(0,0,0,0.28);
			font-family: Calibri, Helvetica, Arial;
		}
		
		#tr-modal h2 { font-size: 16px; font-weight: 700; color: var(--lie-text-emphasis); margin: 0 0 10px; padding-bottom: 12px; border-bottom: 1px solid var(--lie-bg-subtle); font-family: Calibri, Helvetica, Arial; }
		.m-wpm-block { text-align: center; margin-bottom: 4px; }
		.m-wpm-num   { font-size: 3.4rem; font-weight: 800; color: var(--lie-reveal-blue); line-height: 1; font-family: Calibri, Helvetica, Arial; }
		.m-wpm-unit  { font-size: 14px; color: var(--lie-border); font-family: Calibri, Helvetica, Arial; }
		.m-rating-badge { display: inline-block; margin: 7px auto 3px; padding: 4px 18px; border-radius: 20px; font-size: 14px; font-weight: 700; font-family: Calibri, Helvetica, Arial; }
		.m-this-lbl    { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--lie-border); margin-bottom: 8px; font-family: Calibri, Helvetica, Arial; }
		.m-this-row    { display: flex; align-items: flex-start; justify-content: center; gap: 18px; margin-bottom: 6px; }
		.m-this-col    { flex: 0 0 auto; min-width: 75px; }
		.m-this-sep    { font-size: 1.4rem; color: var(--lie-border); line-height: 1.4; }
		.m-this-val    { font-size: 1.2rem; font-weight: 700; color: var(--lie-text-emphasis); font-family: Calibri, Helvetica, Arial; }
		.m-this-sublbl { font-size: 11px; color: var(--lie-border); font-family: Calibri, Helvetica, Arial; }
		.m-this-wpm    { font-size: 1.8rem; font-weight: 800; color: var(--lie-reveal-blue); font-family: Calibri, Helvetica, Arial; margin-top: 4px; margin-bottom: 8px; }
		.m-section-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lie-border); margin-bottom: 6px; margin-top: 4px; font-family: Calibri, Helvetica, Arial; }
		.m-history-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; font-family: Calibri, Helvetica, Arial; }
		.m-history-table th { text-align: left; padding: 3px 7px; color: var(--lie-border); font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--lie-bg-subtle); }
		.m-history-table td { padding: 5px 7px; color: var(--lie-text-muted); border-bottom: 1px solid var(--lie-bg-subtle); }
		.m-history-table .m-current td { font-weight: 700; color: var(--lie-reveal-blue); }
		.m-no-history { font-size: 13px; color: var(--lie-border); font-style: italic; margin-bottom: 14px; font-family: Calibri, Helvetica, Arial; }
		.m-set-dots  { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 4px; }
		.m-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--lie-bg-subtle); border: 2px solid var(--lie-border); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--lie-border); }
		.m-dot.done      { background: var(--lie-reveal-blue); border-color: var(--lie-reveal-blue-dark); color: var(--lie-bg); }
		.m-dot.just-done { background: var(--lie-success); border-color: var(--lie-success); color: var(--lie-bg); }
		.m-set-count { font-size: 12px; color: var(--lie-border); margin-top: 2px; margin-bottom: 8px; font-family: Calibri, Helvetica, Arial; }
		.m-opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lie-bg-subtle); margin-bottom: 8px; }
		.m-opt-label { font-size: 13px; color: var(--lie-text-muted); font-family: Calibri, Helvetica, Arial; }
		.tgl { position: relative; display: inline-block; width: 42px; height: 23px; flex-shrink: 0; }
		.tgl input { opacity: 0; width: 0; height: 0; }
		.tgl-slider { position: absolute; inset: 0; background: var(--lie-border); border-radius: 23px; cursor: pointer; transition: background 0.2s; }
		.tgl-slider:before { content: ''; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: var(--lie-bg); border-radius: 50%; transition: transform 0.2s; }
		.tgl input:checked + .tgl-slider { background: var(--lie-reveal-blue); }
		.tgl input:checked + .tgl-slider:before { transform: translateX(19px); }
		#tr-modal-continue { display: block; width: 100%; padding: 12px; background: var(--lie-reveal-blue); color: var(--lie-bg); border: none; border-radius: 7px; font-size: 15px; font-weight: 700; font-family: Calibri, Helvetica, Arial; cursor: pointer; transition: background 0.18s; }
		#tr-modal-continue:hover { background: var(--lie-reveal-blue-dark); }
		#tr-modal-reset { display: block; width: 100%; padding: 9px; background: var(--lie-bg); color: var(--lie-error); border: 1px solid var(--lie-error-bg); border-radius: 7px; font-size: 13px; font-weight: 600; font-family: Calibri, Helvetica, Arial; cursor: pointer; margin-bottom: 8px; transition: background 0.15s; }
		#tr-modal-reset:hover { background: var(--lie-error-bg); }



		/****************  STATE MACHINE **************** / 

		/* reading — directions force-closed */
		body.s-reading #tr-directions-body { display: none !important; }

		#tr-check-btn:disabled ~ #tr-post-check-btn { display: inline-block !important; }
















												/*******************************************************************************************
												********************************************************************************************
												TABLET DEVICES
												********************************************************************************************
												*******************************************************************************************/


												@media only screen and (max-width: 1000px) {


													.pc	{
															display: block;
														}

													.pci	{
															display: inline-block;
														}

													.pconly	{
															display: none;
													}


													.hand	{
															display: none;
														}

													.handi	{
															display: none;
														}

													.tablet	{
															display: block;
													}




													/*******************************************************************************************
													TABLET browser page setup
													*******************************************************************************************/


													body {
														background-color: var(--lie-bg-subtle);
														margin: 0;
														padding: 0;
														}
														
													header {
														position: fixed;
														background-color:  var(--lie-bg);
														width: 100%;
														height: 54px;
														padding: 0px 0px 0px 0px;
														margin: auto;
														z-index: 100;
														}	
													
													section	{
														background-color: var(--lie-bg-subtle);
														max-width: 800px;
														min-width: 800px;
														padding-left: 0px;
														padding-right: 0px;
														padding-top: 10px;
														padding-bottom: 10px;
														margin: auto;
														text-align: left;
														}

													.center {
														vertical-align: top;
														display: block;
														width: 780px;
														margin: 52px auto 0px auto;
														padding: 2px 0px;
														}

													.dycent-h {
														padding: 7px 0px 12px 0px;
														top: 0px;
														margin: auto;
														width: 800px;
														z-index: 100;
														background-color:  var(--lie-bg);
													}



													/*********** PC Drop Down Catalogue****************/

													.dropPosition {
														margin: 0;
													}



													.c-wrapper ul {
															margin: 0px;
															padding: 0px;
															list-style: none; 
															white-space: nowrap;
															line-height: 1.0;
													}

													.c-wrapper .s0-Menu>li {
														display: inline-block;
													}

													.c-wrapper .s0-Menu a {
															position: relative;
															margin: 0px;
															text-align: left;
															font-family: Calibri;
															font-size: 14px;	
															color: var(--lie-text-muted);
															text-decoration: none;
															padding: 6px 6px 20px 6px;
													}

													.c-wrapper .s1-Menu a {
															display: block;
															padding: 5px 2px 5px 2px;
															width: 145px;	
															color: var(--lie-text-emphasis);
													}

													.c-wrapper .s2-Menu a {
															display: block;
															padding: 5px 2px 5px 2px;
															width: 185px;
													}

													.c-wrapper .s3-Menu a {
															display: block;
															padding: 5px 2px 5px 2px;
															width: 195px;
													}

													.c-wrapper .s3-Compact a {
															display: block;
															padding: 3px 2px 3px 2px;
															width: 225px;
													}

													.c-wrapper .s1-Menu {
															position: absolute;
															top: 40px;
															left: -14px;
															display: none;
															background: var(--lie-bg);
															width: 140px;
															min-height: 120px;	
															padding: 5px 0px 5px 15px;	/* around box */
															box-shadow: var(--lie-shadow-strong);
													}

													.c-wrapper .s2-Menu {
															position: absolute;
															top: 0px;
															left: 157px;
															display: none;
															background: var(--lie-bg);
															width: 180px;
															min-height: 120px;	
															padding: 3px 0px 5px 15px;	/* around box */ 	
															box-shadow: var(--lie-shadow-strong);
													}

													.c-wrapper .s3-Menu  {
															position: absolute;
															top: 0px;
															left: 197px;
															display: none;
															background: var(--lie-bg);
															width: 220px;
															min-height: 122px;	
															padding: 5px 15px;	/* around box */
															box-shadow: var(--lie-shadow-strong);
															
													}

													.c-wrapper .s3-Easy {
														min-height: 310px;	 
													}

													.c-wrapper .s3-TV {
														min-height: 310px;	
													}

													.c-wrapper .s3-Movies {
														min-height: 286px;	 
													}

													.c-wrapper .s1-Menu li {
														padding: 0px 15px;
														margin-top: 0px;
														margin-bottom: 0px;
													}

													.c-wrapper .s2-Menu li {
														padding: 0px 15px;
														margin-top: 0px;
														margin-bottom: 0px;
													}

													.c-wrapper .s3-Menu li {
														padding: 0px 15px;
														margin-top: 0px;
														margin-bottom: 0px;
													}

													.c-wrapper .s0-Menu a:hover {
														color: var(--lie-text-emphasis);

													}

													.c-wrapper .s1-Menu li:hover {
														background-color: var(--lie-border);
														cursor: pointer;	
													}

													.c-wrapper .s0-Menu>li:hover .s1-Menu {
														display: block;
													}

													.c-wrapper .s1-Menu>li:hover .s2-Menu {
														display: block;
													}
													 
													.c-wrapper .s2-Menu>li:hover .s3-Menu {
														display: block;
													}

													.c-wrapper .arrowOne {
														display: inline-block;
														border: 2px solid var(--lie-text-emphasis);
														width: 4px;
														height: 4px;
														border-left: none;
														border-bottom: none;
														position: absolute;
														top: 10px;
														right: 22px;
														margin: 0px 0px;
														transition: all 0.5s
													}

													.c-wrapper .arrowTwo {
														display: inline-block;
														border: 2px solid var(--lie-text-emphasis);
														width: 4px;
														height: 4px;
														border-left: none;
														border-bottom: none;
														position: absolute;
														top: 10px;
														right: 22px;
														margin: 0px 0px;
														transition: all 0.5s
													}

													.c-wrapper .arrowOne {
															transform: rotateZ(45deg);
													}

													.c-wrapper .arrowTwo {
															transform: rotateZ(45deg);
													}

													.c-wrapper .s1-Menu>li:hover .arrowOne {
															transform: rotateZ(45deg) translate(5px, -5px);
													}

													.c-wrapper .s2-Menu>li:hover .arrowTwo {
															transform: rotateZ(45deg) translate(5px, -5px);
													}

												

													.left-contact {
														display: none;
													}
													
													.right-contact {
														margin-left: 0;
														padding: 0 100px;
														width: 600px;
													}


													#tvCards, #skCards, #ezCards, #acCards, #statusAll { /* NEW */
														grid-template-columns: repeat(2, 1fr);
													}

													.lieStatusGroup {
														grid-template-columns: repeat(2, 1fr);
													}

													.lieCardTitle {
														font-size: 20px;
													}

													.lieCardSeries {
														font-size: 16px;
													}

													.lieCardLevel {
														font-size: 17px;
													}

													.lieTile { 
														width: 100px; 
													}
													 
													.lieTileImgWrap { 
														width: 100px; 
														height: 100px; 
													}
									 


													/****************Story Order Setup******************/
													.storyOrder{ margin: 8px 0 4px; }
													.soNum{ width: 26px; }
													.soControls{ width: 30px; }
													.soUp, .soDown{ width: 30px; height: 25px; font-size: 11px; }
													.soHandle{ width: 30px; height: 55px; }
													.soText{ font-size: 1.0rem; }
													.soBody{ padding: 5px 6px 5px 12px; }
													.soHeader{ font-size: 0.9rem; }
													.soList{ list-style: none; margin: 0; padding: 0; }
													.soItem{ display: flex; align-items: stretch; gap: 5px; margin: 4px 0; }



													/****************  Latin & Greek Stems & prefixes ***********************/

													.rt-context-item li { font-size: 19px; }

													.rt-chart-table { width: 96%; margin: 14px 0 24px 2%; }
													.rt-chart-table th, .rt-chart-table td { font-size: 17px; padding: 8px 9px; }
													.rt-chart-table caption { font-size: 21px; }

													.rt-build-item { padding: 13px 15px; margin-bottom: 18px; }
													.rt-slot { min-width: 66px; }


													/****************TOEFL 2026 Input******************/

													.cloze-para {
													  font-size: 16px;
													  line-height: 1.2;  
													}

													.cloze-wrap { 
													  font-size: 15px;
													}




													/*******************************************************************************************
													TABLET fonts
													*******************************************************************************************/

													h1	{
														color: var(--lie-text-primary);
														font-family: Calibri, Helvetica;
														font-size: 12px;
														font-weight: normal;
														text-shadow: none;
														margin: 0px 0px 2px 0px;
														}

													h2	{
														color: var(--lie-text-primary);
														font-family: Calibri, Helvetica;
														font-size: 21px;
														font-weight: normal;
														text-shadow: none;
														margin: 0px 0px 2px 0px;
														}

													h3	{
														color: var(--lie-text-emphasis);
														font-family: Calibri, Helvetica;
														font-size: 21px;
														font-weight: normal;
														text-shadow: none;
														margin: 0px;
														}

													h4	{
														color: var(--lie-text-emphasis);
														font-family: Calibri, Helvetica;
														font-size: 16px;
														font-weight: normal;
														text-shadow: none;
														margin: 0px;
														}

													h5	{
														color: var(--lie-text-primary);
														font-family: Calibri, Helvetica;
														font-size: 22px;
														font-weight: normal;
														text-shadow: none;
														margin: 0px 0px 2px 0px;
														}

													p	{
														color: var(--lie-text-primary);
														font-family: Calibri, Helvetica;
														font-size: 14px;
														font-weight: normal;
														margin-top: 2px;
														margin-bottom: 2px;
														margin-left: 2px;
														margin-right: 0px;
														}

													li	{
														color: var(--lie-text-primary);
														font-family: Calibri, Helvetica;
														font-size: 14px;
														font-weight: normal;
														margin-top: 3px;
														margin-bottom: 3px;
														margin-left: -15px;
														margin-right: 0px;
														}

													.directTitle {
															font-size: 16px;
														}


													/********************article***********************/

													.articles {
														padding: 0px 60px;
													}

													.artPara {
														margin: 23px 0px 13px 0px;
														font-size: 20px;
														font-family: Calibri, Arial;
														line-height: 1.5;
														color: var(--lie-text-primary); 
													}

													.listenPara {
														margin: 10px 0px 25px 0px;
														font-size: 18px;
														font-family: Calibri, Arial;
														border-left: 10px var(--lie-border) solid; 
														padding: 0px 15px;
														line-height: 1.5;
														color: var(--lie-text-primary); 
													}

													.artImage {
														margin: 10px 0px;
														width: 100%;
													}


													.artLogo {
														height: 23px; 
														vertical-align: bottom;
													}


													/********************iteacher, iabout, iorigin, icontact***********************/

													.infopage {
														width: 600px;
														padding: 0px 50px 0px 100px;
														margin: 54px auto 0px auto;
														background-color: var(--lie-bg);
														box-shadow: none;	
													}		

													#ipage {
														width: 100%;
														background-color: var(--lie-bg);
													}
												
													#ipage p {
														line-height: 1.4;
														font-size: 17px;
													}
													#ipage .toggle-inner ul,
													#ipage .toggle-inner ul li {
														font-size: 16px;
													}

									 


													/****************advanced search*********************/

														.logiccontainer {
															display: grid;
															grid-template-columns: 70px 1fr;
															gap: 2px; /* Slightly less space between columns */
														}

														.searchbar {
															width: 97%;
															padding: 8px 0px 8px 10px;
															margin: 5px 0; /* Reduce margin to make it more compact */
															font-size: 4.0vw;
															border-radius: 6px; /* Slightly less rounded corners */
															border: none;
															background-color: var(--lie-bg-subtle);
															box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
															transition: background-color 0.3s, box-shadow 0.3s;
														}

														.operator {
															width: 100%;
															padding: 8px 0px 8px 10px;
															margin: 5px 0; /* Reduce margin to make it more compact */
															font-size: 4.0vw;
															border-radius: 6px; /* Slightly less rounded corners */
															border: none;
															background-color: var(--lie-bg-subtle);
															box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
															transition: background-color 0.3s, box-shadow 0.3s;
														}

														.logicbar {
															width: 97%;
															padding: 8px 0px 8px 10px;
															margin: 5px 0; /* Reduce margin to make it more compact */
															font-size: 4.0vw;
															border-radius: 6px; /* Slightly less rounded corners */
															border: none;
															background-color: var(--lie-bg-subtle);
															box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
															transition: background-color 0.3s, box-shadow 0.3s;
														}

														.searchbar:focus, .operator:focus, .logicbar:focus {
															background-color: var(--lie-bg);
															box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
															outline: none;
														}

														/* Modern card styling */
														#itemList {
															list-style-type: none;
															padding: 0;
															margin: 0;
														}

														#itemList li {
															padding: 20px; /* Reduced padding for smaller card size */
															margin: 8px 0; /* Less space between cards */
															background-color: var(--lie-bg);
															border-bottom: 1px solid var(--lie-border);
															border-right: 1px solid var(--lie-border);
															border-radius: 10px;
															box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08); /* Softer shadow */
															transition: transform 0.3s, box-shadow 0.3s;
															display: none;
														}
													 
														#itemList li:hover {
															transform: translateY(-0px); 
															box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.12);  
														}
													 
														.catTitle {
															font-size: 3.3vw;  
															color: var(--lie-text-muted);
															text-transform: uppercase;
															letter-spacing: 0.8px;  
															margin-bottom: 3px;  
														}

														.srchName {
															font-size: 5.0vw;  
															font-weight: 600;
															color: var(--lie-text-muted);
															margin: 1px 0 14px 0;  
														}

														.srchNum {
															font-size: 3.5vw;  
															font-weight: 400;
															color: var(--lie-text-muted);
															margin: 0px 0 0px 0;  
														}

														.srchDetail {
															font-size: 3.5vw;  
															color: var(--lie-text-muted);
															margin: 3px 0;  
															line-height: 1.1;  
														}

														.srchTags {
															font-size: 3.9vw;
															color: var(--lie-accent-blue);
															font-weight: 500;
															margin-top: 14px;  
														}





													/**********************************************************************/
													/****************activity page content*********************************/
													/**********************************************************************/
													
													
													.activitydescription {
														display: inline-block;
														position: relative;
														width: 380px;
														height: 220px;
														padding: 10px 5px 5px 10px;
														margin: 0px 10px 10px 0px;	
														vertical-align: top;
														background-color: var(--lie-bg);
													}

													.activitysection {
														vertical-align: top;
														width: 380px;
														background-color: var(--lie-bg);
														padding: 9px 5px 1px 10px;
														margin: 8px 0px 8px 0px;
													}

													.pcactivitypic {
														display: inline-block;
														width: 350px;
														height: 126px;
														vertical-align: top;
														padding: 0px;
														margin: 0px;
													}

													.handactivitypic {
														display: none;
													}


														
													/******social media icons for activities***********/	

													.share {
														position: absolute;
														bottom: 10px;
														width: 95%;
													}

													.downloadTable {
														font-family: Calibri; 
														font-size: 14px; 
														border-top: solid var(--lie-easy-primary) 0px;
														padding: 0 0 0 0;
														margin:	10px 0 0 0;		
											 
													}
														
													.downloadTable td {
													  padding: 0 10px 0 0;
													}

													.reload {
														color: var(--lie-text-emphasis);
														font-family: Calibri, Helvetica, Helvetica;
														font-weight: 800;
														font-size: 16px;
													}

													/****************icon set up*************************/

													.bigicon	{
														float: left;
														width: 46px;
														padding: 7px 15px 8px 5px;
														}
													 
										
														
													/****************audio/video player setup*********************/

													.videoframe {
														display: inline-block;
														position: fixed;
														width: 350px;
														height: 200px;
														vertical-align: top;

														padding: 0px;
														box-shadow: var(--lie-shadow-soft);	
														margin: auto;
														z-index: 10;
														}

													.audioframe	{
														display: inline-block;
														position: fixed;
														width: 350px;
														height: 210px;
														vertical-align: top;

														padding: 0px;
														box-shadow: var(--lie-shadow-soft);
														border: 1px solid var(--lie-text-emphasis);
														margin: auto;
														z-index: 10;
														}
														
													.player {
														position: relative;
														width: 100%;
														height: 50px;
														margin: 0px;
														padding: 0px;
														z-index: 1;
														}

													.inplayer {
														position: relative;
														width: 250px;
														height: 40px;
														margin: 5px 0px 5px 0px;
														padding: 0px;
														z-index: 1;
														}
														
														
													#hsticky {
														width: 100%;
														background-color: var(--lie-bg);
														padding: 0px 0px 0px 0px;
													}

													#psticky {
														width: 100%;
														background-color: var(--lie-bg);
														padding: 0px 0px 0px 0px;
													}



													.natLangVid {
														height: 180px;
														width: 320px;
													}

													.natLangVid2 {
														height: 280px;
														width: 280px;
													}


													.diaSpeaker	{
														color: var(--lie-error);
														font-family: Calibri, Helvetica, Helvetica;
														font-size: 14px;
														text-transform: uppercase;
													}

													.diaBullet	{
														margin: 20px 0px 2px -30px;
														font-size: 17px;
														list-style-type: none;			
													}

													.answers {
														  background-color: var(--lie-border);
														  border: none;
														  border-radius: 4px;
														  color: #fff;
														  padding: 6px 11px;
														  text-align: center;
														  text-decoration: none;
														  display: inline-block;
														  font-size: 12px;
														  margin: 4px auto;
														  cursor: pointer;
													}

														

													/****************TABLET background picture setup**************/

													.pos {
														font-size: 13px; 
													 }


													.videotable {
														color: var(--lie-text-primary);
														font-family: Calibri, Helvetica, Helvetica;
														font-size: 12px;
														font-weight: normal;
														text-align: center;
													}
														
													.videopics {
														width: 65px;
														border: none;
														margin: 3px 2px;
														padding: 0px;
													}

														
													/****************answer buttons setup*******************/
													.button {
														font-size: 13px;
														text-align: center;
														padding: 2px 10px 2px 10px;
														margin: 5px 0 0 0;
														height: 25px;
														}

													.answerdiv {
														margin: 0 5px 0 0;
														}



													/****************scriptbox setup************************/
													.scriptbox {
														width: 90%;
														background-color: var(--lie-bg);
														padding: 0px 10px 10px 10px;
														margin: 20px auto 10px auto;
														}
													

													/****************watch next************************/

														.nextLesson {
														  margin: 0 0 0 -26px;
														  padding: 9px 0 9px 30px;
														  list-style: none;
														  font-size: 16px;
														  position: relative;
														}

														.nextLesson::before {
														  content: "";
														  position: absolute;
														  left: 0;
														  top: 50%;
														  transform: translateY(-50%);
														  width: 22px;
														  height: 22px;
														  background: currentColor;
														  -webkit-mask: var(--lie-next-icon) no-repeat center / contain;
														  mask: var(--lie-next-icon) no-repeat center / contain;
														}

													/****************listen & draw setup**************/
													.drawing {
														width: 560px;
														border: 1px solid var(--warn-red);
														margin: 10px 0px 20px 6px;
														padding: 0px 0px 0px 0px;
														}

													.dict-table {
														width: 550px;
														font-family: Calibri, Helvetica;
														font-size: 16px;
														font-weight: normal;
														color: var(--lie-text-primary);
													}	

													.shapes {
														height: 60px;
														margin: 2px 10px 2px 10px;
													}




													/********************************************************************/										
													/******************Index page setup**********************************/
													/********************************************************************/
													
												
													/************************Top Banner Formatting******************************/			
														
													.pcBanner {
														background-image: url("/sitimg/banner-lg.jpg");	
														background-repeat: no-repeat;
														background-size: cover;
														
														background-color: var(--lie-border);
														margin: 40px 0px 20px 0px;
														padding: 30px 0px 30px 60px;
														transition: 1s;
													}

													.bannerTitle {
														font-family: Calibri, Helvetica, Arial;
														font-size: 20px;
														margin: 0px 0px 7px 0px;
														padding: 0px 0px 0px 0px;
													}

													.bannerText {
														font-family: Calibri, Helvetica, Arial;
														font-size: 14px;
														margin: 0px 0px 7px 0px;
														padding: 0px 0px 0px 0px;
													}				
													
													

													
													/************************The Four Activity Buttons******************************/	

													.selectButton {
														width: 95px;
														height: 90px;
														margin:  4px 4px;
														padding: 8px;
														border-radius: 12px;
														color: var(--lie-index-text);
													}	

													.selectorTitle {
														font-size: 16px;
														text-align: center;
														margin: 4px 0px 0px 0px;
														padding: 0px 0px 0px 0px;
														color: var(--lie-index-text);					
													}

													.selectorLevel {
														font-size: 13px;
														text-align: center;
														margin: 0px 0px 0px 0px;
														padding: 0px 0px 0px 0px;
														color: var(--lie-index-text);
													}

													.selectorIconsOn {
														width: 50px;
													}

													.selectorIconsOff {
														width: 50px;
													}




													.bbcFrame {
														border-left: 1px solid var(--lie-index-text); 
														border-right: 1px solid var(--lie-index-text); 
														border-radius: 10px;
														width: 200px;
														padding: 6px 3px 4px 10px;
														margin: 0px 0px 0px 15px;
														transition: 2s;
													}

													.bbcTitle {
														font-family: Calibri, Helvetica, Arial;
														font-size: 14px;
														padding: 0px;
														color: var(--lie-index-text); 
													}

													.bbcText {
														color: var(--lie-index-text); 
														font-family: Calibri, Helvetica, Arial;
														font-size: 12px;
														padding: 3px 0px 0px 10px;
														line-height: 1.3;
													}

													.bbcMediapic {
														display: block;
														width: 50px;
														padding: 0px;
														margin: 0 8px 0 0;
														border-radius: 8px;
														float: right;
													}

													.bbcIcon { width: 30px; padding: 5px 10px 10px 5px; float: left; }

												
													
													/****************icon set up*************************/
													
													.icon	{
														float: left;
														width: 40px;
														padding: 5px 10px 0px 3px;
														}

													.indexicon {
														float: left;
														width: 42px;
														padding: 8px 10px 0px 3px;
														}

													.audiovideoicon	{
														width: 14px;
														vertical-align: -10%;
														}



													.titletag {
														font-family: Calibri, Helvetica, Arial;
														font-size: 9px; 
														margin: -7px 0px -16px 0px;
														line-height: 1.1;
														padding: 0;
													}


													.gramExample {
														font-family: Times New Roman; 
														font-size: 14px; 
														padding: 0 0 0 6px;
													}

											

													.recentbox {
														max-width: 1210px;
														min-width: 600px;
														margin: auto;
													}


												}







	/*******************************************************************************************
	********************************************************************************************
	MID DEVICES (tablets, folding phones, large phones in landscape)
	********************************************************************************************
	*******************************************************************************************/


	@media only screen and (max-width: 750px)  {


		/*******************************************************************************************
		Mid browser swaps — mobile structure
		*******************************************************************************************/

		.pc		{ display: none; }
		.pci	{ display: none; }
		.pconly	{ display: none; }
		.hand	{ display: block; }
		.handi	{ display: inline-block; }
		.tablet	{ display: none; }


		/*******************************************************************************************
		Mid browser page setup — centered 640px column
		*******************************************************************************************/

		body {
			background-color: var(--lie-bg-subtle);
			margin: 0;
			padding: 0;
		}

		header {
			background-color: var(--lie-bg);
			max-width: 100%;
			height: 54px;
			padding: 0px;
			box-shadow: var(--lie-shadow-strong);
			position: fixed;
			z-index: 999999;		
		}

		#site-header-hand {
			box-shadow: var(--lie-shadow-strong);
			position: fixed;
			z-index: 999999;
		}
		

		nav.hand {
			position: fixed;
			left: -2px;
			top: 0px;
			background-color: var(--lie-bg);
			max-width: 100%;
			min-width: 100%;
			height: 46px;
			padding: 3px 0px 3px 0px;
		}

		section {
			background-color: var(--lie-bg-subtle);
			max-width: 640px;
			min-width: 320px;
			width: 95%;
			padding: 54px 0px 10px 0px;
			margin: auto;
			text-align: left;
		}

		.center {
			vertical-align: top;
			display: block;
			width: 100%;
			margin: auto;
			padding: 2px 0px;
		}

		footer {
			background-color: var(--lie-bg);
			border-top: 1px solid var(--lie-text-primary);
			max-width: 100%;
			min-width: 100%;
			padding: 0px;
			margin: 0px;
			z-index: 100;
		}

		.dycent-h {
			max-width: 95%;
			min-width: 95%;
			margin: auto;
		}


		.sharefoot {
			width: 160px;
			margin: 5px auto 5px auto;
		}


		/*******************************************************************************************
		Mid header — hamburger, same as mobile
		*******************************************************************************************/

			



		.headerSelector:hover { background-color: var(--lie-border); }

	 


		/*******************************************************************************************
		Mid fonts — px based, between mobile and tablet
		*******************************************************************************************/

		h1 {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 12px;
			font-weight: normal;
			text-shadow: none;
			margin: -4px 0px 4px 0px;
			padding: 0px;
		}

		h2 {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 22px;
			font-weight: normal;
			text-shadow: var(--lie-text-shadow-soft);
			margin: 4px 0px 4px 0px;
			padding: 0px;
		}

		h3 {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 23px;
			font-weight: normal;
			text-shadow: none;
			margin: 0px 0px 4px 0px;
			padding: 2px 0px 0px 0px;
		}

		h4 {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 18px;
			font-weight: normal;
			text-shadow: none;
			margin: 0px 0px 4px 0px;
			padding: 2px 0px 0px 0px;
		}

		.sActTitles {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 17px;
			font-weight: normal;
			text-shadow: none;
			margin: 0px 0px 4px 0px;
			padding: 0px;
		}

		.aDescriptors {
			color: var(--lie-text-muted);
			font-family: Calibri, Helvetica;
			font-size: 14px;
			font-weight: normal;
			line-height: 1.2;
			text-shadow: none;
			margin: 1px;
		}

		.sumSentence {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 17px;
			font-weight: bold;
			text-shadow: var(--lie-text-shadow-soft);
			margin: 1px 0px 5px 0px;
			padding: 0px;
		}

		p {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 17px;
			font-weight: normal;
			margin: 0px;
			padding-top: 3px;
			line-height: 22px;
		}

		li {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 17px;
			font-weight: normal;
			margin-top: 3px;
			margin-bottom: 3px;
			margin-left: -13px;
			margin-right: 0px;
			padding: 4px 10px 4px 10px;
		}

		.discussQuestion li { padding: 8px 10px 8px 10px; }
		#language li { padding: 4px 10px 4px 8px; }
		.pos { font-size: 15px; }


		/*******************************************************************************************
		Mid articles
		*******************************************************************************************/

		.articles { padding: 16px 20px; }

		.artPara {
			margin: 20px 0 12px 0;
			font-size: 18px;
			line-height: 1.5;
			font-family: Calibri, Arial;
		}

		.listenPara {
			margin: 8px 0px 8px 0px;
			font-size: 17px;
			line-height: 1.4;
			font-family: Calibri, Arial;
			border-left: 10px var(--lie-border) solid;
			padding: 8px 12px;
		}

		.artImage { margin: 8px 0px; width: 97%; }
		.artLogo { height: 20px; vertical-align: bottom; }


		/*******************************************************************************************
		Mid activity page content — mobile structure, wider boxes
		*******************************************************************************************/

		.activitydescription {
			display: inline-block;
			position: static;
			width: 96%;
			height: inherit;
			padding: 16px 10px 10px 12px;
			vertical-align: top;
			margin: 0px 0px 10px 0px;
			background-color: var(--lie-bg);
			border-radius: 0px;
			z-index: 0;
		}

		.activitysection {
			vertical-align: top;
			width: 96%;
			background-color: var(--lie-bg);
			padding: 8px 8px 1px 10px;
			margin: 6px 0px 0px 0px;
		}

		.pcactivitypic { display: none; }

		.handactivitypic {
			display: block;
			width: 100%;
			padding-top: 0px;
			margin: 8px 0px 0px 0px;
		}

		.share {
			position: static;
			margin: 5px 15px 0px 0px;
			width: 95%;
		}

		.reload {
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica, Helvetica;
			font-weight: 800;
			font-size: 15px;
		}

		.bigicon {
			float: left;
			width: 46px;
			padding: 8px 14px 10px 4px;
		}

		.downloadTable {
			font-family: Calibri;
			font-size: 15px;
			padding: 0;
			margin: 10px 0 0 0;
		}

		.downloadTable td { padding: 0 12px 0 0; }

		.scriptbox {
			width: 90%;
			background-color: var(--lie-bg);
			padding: 0px 10px 10px 10px;
			margin: 10px auto 10px auto;
		}



		.nextLesson {
		  margin: 0 0 0 -26px;
		  padding: 9px 0 9px 32px;
		  list-style: none;
		  font-size: 18px;
		  position: relative;
		}

		.nextLesson::before {
		  content: "";
		  position: absolute;
		  left: 0;
		  top: 50%;
		  transform: translateY(-50%);
		  width: 22px;
		  height: 22px;
		  background: currentColor;
		  -webkit-mask: var(--lie-next-icon) no-repeat center / contain;
		  mask: var(--lie-next-icon) no-repeat center / contain;
		}

		.toggle { display: none; }

		.answerdiv { margin: 0px 5px; }

		.Evcb { display: none; }
		.vocabli { list-style-type: none; margin: 0px; }
		.vcbHid { visibility: hidden; }


		/*******************************************************************************************
		Mid answer buttons — px sized
		*******************************************************************************************/

		.answers {
			display: inline-block;
			position: relative;
			background-color: var(--lie-border);
			border: none;
			border-radius: 4px;
			text-decoration: none;
			font-size: 12px;
			text-align: center;
			color: #fff;
			padding: 6px 10px;
			margin: 4px auto;
			cursor: pointer;
			transition: all 0.5s;
		}

		.answers::before {
			content: '';
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
			z-index: 1;
			background-color: rgba(255,255,255,0.2);
			transition: all 0.5s;
		}
		.answers:hover::before {
			opacity: 0;
			transform: scale(0.5,0.5);
		}
	 

		/*******************************************************************************************
		Mid audio/video — mobile structure
		*******************************************************************************************/

		.audioframe {
			display: inline-block;
			position: fixed;
			width: 96%;
			height: 190px;
			vertical-align: top;
			padding: 5px;
			border: 1px solid var(--lie-text-emphasis);
			margin: auto;
		}

		.player {
			position: relative;
			width: 100%;
			height: 35px;
			margin: 20px 0px 0px 0px;
			padding: 0px;
			z-index: 1;
		}

		.inplayer {
			position: relative;
			width: 100%;
			height: 30px;
			margin: 20px 0px 0px 0px;
			padding: 0px 0px 7px 0px;
			z-index: 1;
		}

		.videoframediv {
			position: relative;
			width: 96%;
			height: 0;
			padding: 60% 5px 5px 5px;
		}

		.videoframe {
			display: block;
			position: absolute;
			top: 0; left: 0; bottom: 0; right: 0;
			width: 100%; height: 100%;
		}

		#vid-container {
			position: relative;
			width: 98%;
			padding-bottom: 57%;
			height: 0;
		}

		#vid-container.fixed {
			position: fixed;
			bottom: 5px;
			right: 5px;
			width: 60%;
			padding-bottom: 34%;
			height: 0;
			z-index: 1000;
		}

		.toggle-button {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			display: block;
			border: 1px solid var(--lie-text-emphasis);
			border-radius: 4px;
			background: none;
			padding: 3px 5px;
			margin: 10px 0 10px 5px;
			height: 26px;
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica;
			font-size: 13px;
			font-weight: normal;
		}

		.youtubeplayer {
			position: absolute;
			width: 100%; height: 100%;
			border: 0;
		}

		.natLangVid { height: 200px; width: 340px; }
		.natLangVid2 { height: 280px; width: 280px; }


		.lie-pinToggle {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			display: block;
			border: 1px solid var(--lie-text-emphasis);
			border-radius: 4px;
			background: none;
			padding: 3px 5px;
			margin: 10px 10px 10px auto;
			height: 26px;
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica;
			font-size: 13px;
			font-weight: normal;
		}
		#disable-button.lie-pinToggle {
			background: var(--lie-text-emphasis);
			color: var(--lie-bg);
		}

		#enable-button { display: none; } 
		 



		/*******************************************************************************************
		Mid vocab checkmarks — slightly larger than mobile
		*******************************************************************************************/

		.vcbCheck {
			position: relative;
			display: inline-block;
			left: -28px;
			margin: 0px -26px 0px 0px;
		}

		.vcbCheck label {
			cursor: pointer;
			position: absolute;
			width: 16px; height: 16px;
			top: 5px; left: 2px;
			border-radius: 4px;
			box-shadow: inset 0px 1px 1px var(--lie-bevel-dark), 0px 1px 0px var(--lie-bevel-light);
			background: linear-gradient(to top, var(--lie-checkbox-grad-start) 0%, var(--lie-checkbox-grad-end) 100%);
		}

		.vcbCheck label:after {
			opacity: 0;
			content: '';
			position: absolute;
			width: 8px; height: 3px;
			background: transparent;
			top: 4px; left: 3px;
			border: 3px solid var(--lie-tv-primary);
			border-top: none;
			border-right: none;
			transform: rotate(-45deg);
		}

		.vcbCheck input[type=checkbox]:checked + label:after { opacity: 1; }


		/*******************************************************************************************
		Mid tipExp — fixed position like mobile
		*******************************************************************************************/

		.tipExp {
			border-radius: 3px;
			padding: 8px 10px;
			position: fixed;
			left: 5vw;
			z-index: 1;
			visibility: hidden;
			top: 15vh;
			bottom: auto;
			max-height: 70vh;
			overflow: scroll;
			width: 88vw;
			margin: 0px;
			background-color: var(--lie-tv-primary-bg);
			border: 1px solid var(--lie-text-primary);
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica, Helvetica;
			font-size: 15px;
		}


		/****************Story Order Setup******************/
		.storyOrder{ margin: 8px 0 4px; }
		.soHeader{ display: none; font-size: 0.9rem; }
		.soNum{ width: 26px; }
		.soControls{ width: 30px; }
		.soUp, .soDown{ width: 30px; height: 25px; font-size: 11px; }
		.soHandle{ width: 30px; height: 55px; }
		.soText{ font-size: 1.1rem; }
		.soBody{ padding: 5px 6px 5px 12px; }


		/****************  Latin & Greek Stems & prefixes ***********************/

		.rt-context-item { margin-bottom: 20px; }
		.rt-context-item li { font-size: 18px; }

		.rt-chart-table { width: 98%; margin: 12px 0 20px 1%; }
		.rt-chart-table th, .rt-chart-table td { font-size: 16px; padding: 7px 8px; }
		.rt-chart-table td.rt-icon-cell { width: 40px; }
		.rt-chart-table caption { font-size: 19px; }

		.rt-build-item { padding: 12px 14px; margin-bottom: 16px; }
		.rt-slots { gap: 8px; }
		.rt-slot { min-width: 60px; min-height: 24px; }
		.rt-tilebank { gap: 7px; }
		.rt-tile { padding: 5px 11px; }




		/*******************************************************************************************
		Mid next activity bar
		*******************************************************************************************/

		.nextbar {
			font-family: Calibri, Helvetica;
			font-size: 15px;
			font-weight: normal;
			background-color: var(--lie-accent-blue);
			display: block;
			max-width: 100%;
			min-width: 100%;
			padding: 8px 0px 7px 8px;
			margin: 0px 0px 0px -2%;
		}

		.nextdiv {
			display: inline-block;
			border: 1px solid var(--lie-bg);
			width: 46%;
			padding: 5px 0px 0px 4px;
			margin: 0px 3px;
		}

		.enddiv {
			display: inline-block;
			width: 46%;
			padding: 5px 0px 0px 4px;
			margin: 0px 3px 0px 0px;
		}

		.nextleft {
			display: inline-block;
			width: 29%;
			padding: 0px; margin: 0px;
		}

		.nextright {
			display: inline-block;
			width: 57%;
			text-align: left;
			padding: 12px 0px 0px 0px;
			margin: 0px;
			color: var(--lie-bg);
			font-family: Calibri, Helvetica;
			font-size: 13px;
			font-weight: normal;
			vertical-align: top;
		}

		.nextbarimg { width: 95%; padding: 3px 0px 0px 0px; margin: 0px; }
		.nextprev { display: inline-block; vertical-align: top; width: 7%; }
		.nextprevimg { height: 50px; margin: 0px 5px 0px 0px; }
		.white { color: var(--lie-bg); }


		/*******************************************************************************************
		Mid drawing/listen & draw
		*******************************************************************************************/

		.drawing {
			width: 95%;
			border: 1px solid var(--warn-red);
			margin: 10px 0px 10px 6px;
			padding: 0px;
		}

		.dict-table {
			width: 98%;
			font-family: Calibri, Helvetica;
			font-size: 14px;
			font-weight: normal;
			color: var(--lie-text-primary);
		}

		.shapes { height: 32px; margin: 2px 6px 2px 2px; }


		/*******************************************************************************************
		Mid video background
		*******************************************************************************************/

		.videotable {
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica;
			font-size: 14px;
			font-weight: normal;
			text-align: center;
		}

		.videopics {
			width: 80px;
			border: none;
			margin: 2px 0px;
			padding: 0px;
		}


		/*******************************************************************************************
		Mid index — banner, selectors, sort bar, media cards
		*******************************************************************************************/

		.handBanner {
			background-image: url("/sitimg/banner-hand.jpg");
			background-repeat: no-repeat;
			background-size: cover;
			background-color: var(--lie-border);
			margin: 0px 0px -5px 0px;
			padding: 30px 0px 30px 0px;
			transition: 1s;
		}

		.blurbContainer {
			width: 75%;
			margin: 0px auto 20px auto;
			padding: 0px;
			border-radius: 0px;
		}


		.selectorContainer {
			width: 75%;
			margin: 0px auto;
			padding: 0px;
			border-radius: 0px;
		}

		.selectButton {
			width: 110px;
			height: 100px;
			display: inline-block;
			margin: 4px 4px;
			padding: 10px;
			border-radius: 15px;
			border: 1px solid var(--lie-bg);
			transition: 850ms;
			color: var(--lie-index-text);
		}

		.selectorTitle {
			display: block;
			font-family: Helvetica;
			font-size: 18px;
			font-weight: normal;
			text-align: center;
			margin: 6px 0px 0px 0px;
			padding: 0px;
			color: var(--lie-index-text);
		}

		.selectorLevel {
			display: block;
			font-family: Helvetica;
			font-size: 13px;
			font-weight: normal;
			text-align: center;
			margin: 0px; padding: 0px;
			color: var(--lie-index-text);
		}

		.selectorIconsOn {
			border-radius: 100%;
			display: block;
			width: 58px;
			margin: 0px auto;
			box-shadow: var(--lie-shadow-soft);
		}

		.selectorIconsOff {
			border-radius: 100%;
			display: block;
			width: 58px;
			margin: 0px auto;
			box-shadow: var(--lie-shadow-soft);
			color: var(--lie-index-text);
		}

		.bannerTitle {
			font-family: Calibri, Helvetica, Arial;
			font-size: 20px;
			margin: 0px 0px 5px 0px;
			padding: 0px;
			color: var(--lie-index-text);
		}

		.bannerText {
			font-family: Calibri, Helvetica, Arial;
			font-size: 16px;
			margin: 0px 0px 5px 0px;
			padding: 0px;
			color: var(--lie-index-text);
		}


		.colorEasy {
			border: 1px solid var(--lie-easy-primary)
		}

		.colorTV {
			border: 1px solid var(--lie-tv-primary)		
		}

		.colorNews {
			border: 1px solid var(--lie-reveal-blue)		
		}

		.colorAcad {
			border: 1px solid var(--lie-acad-primary)		
		}





		/* -------header stetup-------- */
		
		.logo-container {
			position: absolute;
			top: 8px;
			left: 38px;
		}

		.hdrCtls {
			position: fixed;
			top: 10px;
			right: 10px;
			display: flex;
			align-items: center;
			gap: 1px;
			z-index: 1010;
		}
		.hdrPop {
			top: calc(100% + 7px);
			right: -5;

		}

		.hdrPopRow {
			font-size: 16px;
			padding: 8px 10px;
		}



		/* -------hamburger stetup-------- */
		
		.hbWrap { display: block; }

		.hbBtn {
			position: relative;
			width: 40px;
			height: 40px;
			border: none;
			background: none;
			padding: 0;
			cursor: pointer;
			flex: 0 0 auto;
		}

		/* --- hamburger / X, drawn in pure CSS, no icon font --- */

		.hbIconBox {
			position: absolute;
			top: 56%;
			left: 32%;
			width: 18px;
			height: 13px;
			transform: translate(-50%, -50%);
		}

		.hbIconSpin {
			position: relative;
			width: 100%;
			height: 100%;
			transform: rotate(0deg);
			transition: transform .32s cubic-bezier(.4, 0, .2, 1);
		}

		.hbWrap.hbOpen .hbIconSpin {
			transform: rotate(90deg);
		}

		.hbBar {
			position: absolute;
			left: 0;
			width: 18px;
			height: 2px;
			background: var(--lie-text-emphasis);
			border-radius: 1px;
			transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
		}

		.hbBar:nth-child(1) { top: 0; }
		.hbBar:nth-child(2) { top: 5.5px; }
		.hbBar:nth-child(3) { top: 11px; }

		.hbWrap.hbOpen .hbBar:nth-child(1) {
			top: 5.5px;
			transform: rotate(45deg);
		}

		.hbWrap.hbOpen .hbBar:nth-child(2) {
			opacity: 0;
		}

		.hbWrap.hbOpen .hbBar:nth-child(3) {
			top: 5.5px;
			transform: rotate(-45deg);
		}

		/* --- chevrons, same border-trick as desktop .arrowTwo --- */

		.hbRowChevron {
			display: inline-block;
			width: 6px;
			height: 6px;
			border: 2px solid var(--lie-text-muted);
			border-left: none;
			border-bottom: none;
			transform: rotate(45deg);
			flex: 0 0 auto;
			margin-left: 10px;
		}

		.hbBackIcon {
			display: inline-block;
			width: 6px;
			height: 6px;
			border: 2px solid var(--lie-text-emphasis);
			border-right: none;
			border-top: none;
			transform: rotate(45deg);
			flex: 0 0 auto;
		}

		/* --- layout: header stays fixed at 54px, panel/scrim start below it --- */

		.hbScrim {
			position: fixed;
			top: 54px;
			left: 0;
			width: 100%;
			height: calc(100% - 54px);
			background: rgba(0,0,0,0);
			pointer-events: none;
			z-index: 99998;
			transition: background .28s ease;
		}

		.hbWrap.hbOpen .hbScrim {
			background: rgba(0,0,0,0.35);
			pointer-events: auto;
		}

		.hbPanel {
			position: fixed;
			top: 54px;
			left: 0;
			width: 85vw;
			max-width: 340px;
			height: calc(100% - 54px);
			background: var(--lie-bg);
			border-right: 1px solid var(--lie-border);
			box-shadow: var(--lie-shadow-strong);
			transform: translateX(-100%);
			transition: transform .28s ease;
			overflow: hidden;
			z-index: 99999;
		}

		.hbWrap.hbOpen .hbPanel {
			transform: translateX(0);
		}

		.hbScreens {
			position: relative;
			width: 100%;
			height: 100%;
		}

		.hbScreenPane {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow-y: auto;
			background: var(--lie-bg);
			transition: transform .3s cubic-bezier(.4, 0, .2, 1);
		}

		.hbRow {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			text-align: left;
			padding: 9px 18px;
			border: none;
			background: none;
			border-bottom: 1px solid var(--lie-border);
			color: var(--lie-text-primary);
			font-family: Calibri, Helvetica, Arial;
			font-size: 19px;
			cursor: pointer;
		}

		.hbRow:active {
			background: var(--lie-bg-subtle);
		}

		.hbBack {
			display: flex;
			align-items: center;
			gap: 10px;
			width: 100%;
			text-align: left;
			padding: 14px 16px;
			border: none;
			background: var(--lie-bg-subtle);
			border-bottom: 1px solid var(--lie-border);
			color: var(--lie-text-emphasis);
			font-family: Calibri, Helvetica, Arial;
			font-size: 18px;
			font-weight: bold;
			cursor: pointer;
		}

		/* Per-category accent bar, mirrors .lieCard border-left convention */
		.hbRow[data-cat="Academic"] { border-left: 5px solid var(--lie-acad-primary); }
		.hbRow[data-cat="Language Skills"] { border-left: 5px solid var(--lie-skills-primary); }
		.hbRow[data-cat="Easy TV"] { border-left: 5px solid var(--lie-easy-primary); }
		.hbRow[data-cat="TV Programs"],
		.hbRow[data-cat="Movies"] { border-left: 5px solid var(--lie-tv-primary); }

		.navDate {
			font-size: 0.80em;
			opacity: 0.70;
			margin: 0 0 0 3px;
		}

		.pdftag {
			font-size: 0.7em;	
			color: var(--lie-error);
			margin: 0 0 0 3px;			
		}


		/* ------ card stetup-------- */
		.recentbox {
			max-width: 100%;
			min-width: 310px;
			padding: 0px;
			margin: 8px 0px 0px 0px;
		}	


		#tvCards, #skCards, #ezCards, #acCards, #statusAll {
			grid-template-columns: minmax(0, 1fr);
		}

		.lieStatusGroup {
			grid-template-columns: minmax(0, 1fr);
		}

		.lieStrip { padding-left: 0px; padding-right: 0px; scroll-padding-left: 0px; scroll-padding-right: 0px; }	

		.lieStripPanel { /* NEW */
			padding: 0 30px;
		}

		.lieSortBarTop { /* NEW */
			font-size: 16px;
		}

		.lieSortBarBottom { /* NEW */
			font-size: 16px;
		}

		.lieSortBar,
		.lieStatusBar {
			flex-wrap: wrap;
			gap: 6px 10px;
			padding: 8px 12px;
			margin: 6px 0 6px 0;
		}

		.lieStatusAdv {
			margin-left: auto;
		}

		.lieStatusShow {
			margin-left: auto;
		}

		.lieCard {
			min-height: 100px;
		}

		.lieCardBody {
			padding: 10px 10px 10px 14px;
		}

		.lieCardTitle {
			font-size: 20px;
		}

		.lieCardSeries {
			font-size: 16px;
		}

		.lieCardLevel {
			font-size: 17px;
		}

		.lieCardThumbWrap {
			width: 110px;
		}

		.lieTile { 
			width: 100px; 
		}
		 
		.lieTileImgWrap { 
			width: 100px; 
			height: 100px; 
		}


		.icon { float: left; width: 42px; padding: 4px 10px 0px 4px; }

		.titletag {
			font-family: Calibri, Helvetica, Arial;
			font-size: 11px;
			margin: -7px 0px -16px 0px;
			line-height: 1.1;
			padding: 0;
		}

		.bbcFrame {
			border-left: 1px solid var(--lie-index-text); 
			border-right: 1px solid var(--lie-index-text); 
			border-radius: 10px;
			width: 240px;
			padding: 6px 3px 4px 10px;
			margin: 0px 0px 0px 20px;
			transition: 2s;
		}

		.bbcTitle {
			font-family: Calibri, Helvetica, Arial;
			font-size: 15px;
			padding: 0px;
			color: var(--lie-index-text); 
		}

		.bbcText {
			color: var(--lie-index-text); 
			font-family: Calibri, Helvetica, Arial;
			font-size: 13px;
			padding: 3px 0px 0px 10px;
			line-height: 1.3;
		}

		.bbcMediapic {
			display: block;
			width: 50px;
			padding: 0px;
			margin: 0 8px 0 0;
			border-radius: 8px;
			float: right;
		}

		.bbcIcon { width: 30px; padding: 5px 10px 10px 5px; float: left; }


		/*******************************************************************************************
		Mid iteacher / iabout / icontact
		*******************************************************************************************/

		#ipage {
			width: 100%;
			background-color: var(--lie-bg);
		}

		.infopage {
			width: 96%;
			padding: 0px;
			margin: 10px auto 0px auto;
			background-color: var(--lie-bg);
			box-shadow: none;
		}



		.lie-form { margin-left: 0; }

		.left-contact { display: none; }

		.right-contact {
			width: 94%;
			padding: 0px 16px;
			margin: 0px;
		}

		#ipage p { line-height: 1.5; font-size: 16px; }

		#ipage .toggle-inner ul,
		#ipage .toggle-inner ul li { font-size: 15px; }

		.new-heading { font-size: 16px; }
		.new-item { font-size: 14px; }
		.new-date { font-size: 12px; }


		/*******************************************************************************************
		Mid TOEFL / cloze
		*******************************************************************************************/

		.cloze-para {
			font-family: Calibri, Arial, sans-serif;
			font-size: 16px;
			line-height: 1.3;
			padding: 5px 10px;
			background-color: var(--lie-bg-subtle);
		}

		.cloze-wrap {
			display: inline-flex;
			font-family: Consolas;
			font-size: 15px;
			align-items: center;
			gap: .08rem;
			padding: 0 .1rem;
			margin: 0 .15rem;
			position: relative;
		}

		.cloze-input {
			width: 1.0rem;
			border: none;
			border-bottom: 2px solid var(--lie-accent-blue);
			text-align: center;
			font: inherit;
			outline: none;
			background: none;
		}

		.cloze-input.filled { width: 0.65rem; }


	}







									/*******************************************************************************************
									********************************************************************************************
									HANDHELD DEVICES
									********************************************************************************************
									*******************************************************************************************/


									@media only screen and (max-width: 440px) {



										/*******************************************************************************************
										Hand browser swaps
										*******************************************************************************************/

										.pc	{
												display: none;
											}

										.pci	{
												display: none;
											}

										.pconly	{
												display: none;
												}

										.hand	{
												display: block;
											}

										.handi	{
												display: inline-block;
											}

										.tablet	{
												display: none;
										}




										/************iteacher, icontact, iabout, iorigin******************/



										#ipage {
											width: 100%;
											background-color: var(--lie-bg);
										}


										.lie-form {
											margin-left: 0;
										}
										
										.left-contact {
											display: none;
										}
										
										.right-contact {
												width: 94%;
												padding: 0px 3vw 0px 3vw;
												margin: 0px 0px 0px 0px;
										}	

										
										#ipage p {
											line-height: 1.6;
										}
										#ipage .toggle-inner ul,
										#ipage .toggle-inner ul li {
											font-size: clamp(1.10rem, 4.4vw, 1.35rem); /* was 4.4vw */
										}
										#ipage .toggle-inner ul li {
											font-size: clamp(0.90rem, 3.6vw, 1.10rem); /* was 3.6vw */
											padding-left: 7.2vw;
											padding-bottom: 2.6vw;
										}
										#ipage .toggle-inner ul li::before {
											left: 3.1vw;
										}
										.new-heading {
											font-size: clamp(1.03rem, 4.1vw, 1.26rem); /* was 4.1vw */
										}
										.new-item {
											font-family: Courier New, monospace;
											font-size: clamp(0.90rem, 3.6vw, 1.10rem); /* was 3.6vw */
											color: var(--lie-text-emphasis); 
											margin: 20px 0px 20px 15px;
										}	
										.new-date {
											font-family: Courier New, monospace;
											font-size: clamp(0.80rem, 3.2vw, 0.98rem); /* was 3.2vw */
											font-weight: bold;
											color: var(--lie-text-muted);
											margin-bottom: 5px;
										}	


										.infopage {
											width: 96%;
											padding: 0px;
											margin: 10px auto 0px auto;
											background-color: var(--lie-bg);
											box-shadow: none;
										}




										/*******************************************************************************************
										Hand browser page setup
										*******************************************************************************************/

										header {
											background-color:  var(--lie-bg);
											position: fixed;
											max-width: 100%;
											height: 54px;
											padding: 0px 0px 0px 0px;
											box-shadow: var(--lie-shadow-strong);
											z-index: 999999;										
										}


										#site-header-hand {
											box-shadow: var(--lie-shadow-strong);
											position: fixed;
											z-index: 999999;
										}	
											
										body {
											background-color: var(--lie-bg);
											margin: 0;
											padding: 0;
										}

										nav.hand {
											position: fixed;
											left: -2px;
											top: 0px;
											background-color:  var(--lie-bg);
											max-width: 100%;
											min-width: 100%;
											height: 10.0vw;
											padding: 3px 0px 3px 0px;
										}

										section {
											background-color: var(--lie-bg-subtle);
											max-width: 98%;
											min-width: 98%;
											padding: 12vw 0px 10px 0px;
											margin: auto;
											text-align: left;
										}

										.center {
											vertical-align: top;
											display: block;
											width: 100%;
											margin: auto;
											padding-left: 0px;
											padding-right: 0px;
											padding-top: 2px;
											padding-bottom: 2px;
										}

										footer {
											background-color:  var(--lie-bg);
											border-top: 1px solid black;
											max-width: 100%;
											min-width: 100%;
											padding: 0px 0px 0px 0px;
											margin: 0px 0px 0px 0px;
											z-index: 100;
										}

	 


										/*******************************************************************************************
										Mobile (Hand) header — fluid sizing (desktop values leak through flex/gap/padding otherwise)
										*******************************************************************************************/

										.dycent-h {
											max-width: 98%;
											min-width: 98%;
											margin: auto;
											gap: 2.5vw;              /* was 12px */
											padding: 0 1vw;          /* was 0 22px */
										}

										/* --- logo --- */

										.logo-container {
											flex: 0 1 auto;
											min-width: 0;
											margin-left: 1.0vw;
											overflow: hidden;
										}

										.titlelogo {
											height: 8.0vw;          /* was 34px */
											margin-right: 0.3vw;
										}

										.titletext {
											font-size: 5.0vw;       /* was 22px */
											white-space: nowrap;
										}

										/* --- right controls --- */

										.hdrCtls {
											flex: 0 0 auto;
											gap: 1.0vw;              /* was 4px */
										}

										.hdrBtn {
											height: 7.9vw;          /* was 34px — restored, no longer 40px */
											min-width: 8.0vw;       /* was 34px */
											padding: 0 1.0vw;        /* was 0 7px */
											font-size: 5.0vw;       /* was 18px */
										}

										.hdrIco {
											width: 5.5vw;           /* was 21px */
											height: 5.5vw;
										}

										.hdrBtnDm .hdrIco {
											width: 5.5vw;           /* was 20px */
											height: 5.5vw;
										}

										.hdrFlag {
											width: 6.5vw;           /* was 25px */
										}

										.hdrCaret {
											width: 2.3vw;           /* was 10px */
											height: 1.4vw;          /* was 6px */
											margin-left: 1vw;
										}

										.hdrPopRow {
											font-size: clamp(0px, 4.5vw, 1.19rem);
											padding: 1.60vw 2.30vw;   /* was 7px 10px */
											gap: 1.60vw;              /* was 7px */
										}

										.hdrPopDiv {
											margin: 1.15vw 0;         /* was 5px */
										}

										.hdrPop {
											padding: 1.15vw 0;        /* was 5px 0 */
										}




										/*******************************************************************************************
										Hamburger — mobile overrides (490 tier)
										*******************************************************************************************/

										.hbWrap { display: block; }

										.hbBtn {
											position: relative;
											width: 10vw;                    /* was 40px */
											height: 10vw;                   /* was 40px */
											border: none;
											background: none;
											padding: 0;
											cursor: pointer;
											flex: 0 0 auto;
										}

										/* --- hamburger / X, drawn in pure CSS, no icon font --- */

										.hbIconBox {
											position: absolute;
											top: 56%;
											left: 32%;
											width: 4.5vw;                    /* was 18px */
											height: 3.3vw;                   /* was 13px */
											transform: translate(-50%, -50%);
										}

										.hbIconSpin {
											position: relative;
											width: 100%;
											height: 100%;
											transform: rotate(0deg);
											transition: transform .32s cubic-bezier(.4, 0, .2, 1);
										}

										.hbWrap.hbOpen .hbIconSpin {
											transform: rotate(90deg);
										}

										.hbBar {
											position: absolute;
											left: 0;
											width: 4.17vw;                    /* was 18px */
											height: 2px;                      /* kept px — hairline, sub-pixel blurs */
											background: var(--lie-text-emphasis);
											border-radius: 1px;
											transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
										}

										.hbBar:nth-child(1) { top: 0; }
										.hbBar:nth-child(2) { top: 1.27vw; }   /* was 5.5px */
										.hbBar:nth-child(3) { top: 2.55vw; }   /* was 11px */

										.hbWrap.hbOpen .hbBar:nth-child(1) {
											top: 1.27vw;                      /* was 5.5px */
											transform: rotate(45deg);
										}

										.hbWrap.hbOpen .hbBar:nth-child(2) {
											opacity: 0;
										}

										.hbWrap.hbOpen .hbBar:nth-child(3) {
											top: 1.27vw;                      /* was 5.5px */
											transform: rotate(-45deg);
										}

										/* --- chevrons, same border-trick as desktop .arrowTwo --- */

										.hbRowChevron {
											display: inline-block;
											width: 1.39vw;                    /* was 6px */
											height: 1.39vw;                   /* was 6px */
											border: 2px solid var(--lie-text-muted);
											border-left: none;
											border-bottom: none;
											transform: rotate(45deg);
											flex: 0 0 auto;
											margin-left: 2.31vw;              /* was 10px */
										}

										.hbBackIcon {
											display: inline-block;
											width: 1.39vw;                    /* was 6px */
											height: 1.39vw;                   /* was 6px */
											border: 2px solid var(--lie-text-emphasis);
											border-right: none;
											border-top: none;
											transform: rotate(45deg);
											flex: 0 0 auto;
										}

										/* --- layout: header stays fixed at 54px, panel/scrim start below it --- */
										/* NOTE: 54px here is coupled to .dycent-h min-height: 54px.
										   Left in px deliberately — converting one without the other
										   opens a gap or overlap under the fixed header. */

										.hbScrim {
											position: fixed;
											top: 12vw;
											left: 0;
											width: 100%;
											height: calc(100% - 54px);
											background: rgba(0,0,0,0);
											pointer-events: none;
											z-index: 99998;
											transition: background .28s ease;
										}

										.hbWrap.hbOpen .hbScrim {
											background: rgba(0,0,0,0.35);
											pointer-events: auto;
										}

										.hbPanel {
											position: fixed;
											top: 12vw;
											left: 0;
											width: 85vw;
											max-width: 340px;
											height: calc(100% - 54px);
											background: var(--lie-bg);
											border-right: 1px solid var(--lie-border);
											box-shadow: var(--lie-shadow-strong);
											transform: translateX(-100%);
											transition: transform .28s ease;
											overflow: hidden;
											z-index: 99999;
										}

										.hbWrap.hbOpen .hbPanel {
											transform: translateX(0);
										}

										.hbScreens {
											position: relative;
											width: 100%;
											height: 100%;
										}

										.hbScreenPane {
											position: absolute;
											top: 0;
											left: 0;
											width: 100%;
											height: 100%;
											overflow-y: auto;
											background: var(--lie-bg);
											transition: transform .3s cubic-bezier(.4, 0, .2, 1);
										}

										.hbRow {
											display: flex;
											align-items: center;
											justify-content: space-between;
											width: 100%;
											text-align: left;
											padding: 2.08vw 4.17vw;           /* was 9px 18px */
											border: none;
											background: none;
											border-bottom: 1px solid var(--lie-border);
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica, Arial;
											font-size: 4.40vw;                /* was 19px */
											cursor: pointer;
										}

										.hbRow:active {
											background: var(--lie-bg-subtle);
										}

										.hbBack {
											display: flex;
											align-items: center;
											gap: 2.31vw;                      /* was 10px */
											width: 100%;
											text-align: left;
											padding: 3.24vw 3.70vw;           /* was 14px 16px */
											border: none;
											background: var(--lie-bg-subtle);
											border-bottom: 1px solid var(--lie-border);
											color: var(--lie-text-emphasis);
											font-family: Calibri, Helvetica, Arial;
											font-size: 4.17vw;                /* was 18px */
											font-weight: bold;
											cursor: pointer;
										}

										/* Per-category accent bar, mirrors .lieCard border-left convention */
										.hbRow[data-cat="Academic"] { border-left: 1.16vw solid var(--lie-acad-primary); }        /* was 5px */
										.hbRow[data-cat="Language Skills"] { border-left: 1.16vw solid var(--lie-skills-primary); } /* was 5px */
										.hbRow[data-cat="Easy TV"] { border-left: 1.16vw solid var(--lie-easy-primary); }          /* was 5px */
										.hbRow[data-cat="TV Programs"],
										.hbRow[data-cat="Movies"] { border-left: 1.16vw solid var(--lie-tv-primary); }             /* was 5px */








										/*******************************************Directions*****************************************/


										.directionsLanguageFlag {
											width: 7.1vw;
											vertical-align: center;
											margin: 0px 4px 0px 0px;
										}

										.directTitle {
											font-size: clamp(1.00rem, 4.0vw, 1.23rem); /* was 4.0vw */
										}

										.directExplain {
											font-size: clamp(0.90rem, 3.6vw, 1.10rem); /* was 3.6vw */
											padding: 4px 0px 4px 0px;
										}

										.headerSelector {
											padding: 3vw 0vw 3vw 2.6vw;
											cursor:pointer;
										}

										.headerSelector:hover {
											background-color: var(--lie-border);
										}




										/*******************************************************************************************
										Articles
										*******************************************************************************************/



										.articles {
											padding: 4.0vw 4.0vw;
										}

										.artPara {
											margin: 6.0vw 0 4.0vw 0;
											font-size: clamp(1.13rem, 4.5vw, 1.38rem); /* was 4.5vw */
											line-height: 1.5;
											font-family: Calibri, Arial;
										}

										.listenPara {
											margin: 2.0vw 0.0vw 2.0vw 0.0vw;
											font-size: clamp(1.05rem, 4.2vw, 1.29rem); /* was 4.2vw */
											line-height: 1.3;
											font-family: Calibri, Arial;
											border-left: 10px var(--lie-border) solid; 
											padding: 2.0vw 2.0vw;
										}

										.artImage {
											margin: 2.0vw 2.0vw;
											width: 97%;
										}

										.artLogo {
											height: 5.0vw; 
											vertical-align: bottom;
										}





										/*******************************************************************************************
										HAND fonts
										*******************************************************************************************/

										h1	{
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: clamp(0.80rem, 3.2vw, 0.98rem); /* was 3.2vw */
											font-weight: normal;
											text-shadow: var(--lie-text-shadow-soft);
											margin: -6px 0px 6px 0px;
											padding: 0px 0px 0px 0px;
											}
											
										h2	{
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: clamp(1.50rem, 6.0vw, 1.84rem); /* was 6.0vw */
											font-weight: normal;
											text-shadow: var(--lie-text-shadow-soft);
											margin: 6px 0px 5px 0px;
											padding: 0px 0px 0px 0px;
											}

										h3	{
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: clamp(1.35rem, 5.4vw, 1.65rem); /* was 5.4vw */
											font-weight: normal;
											text-shadow: none;
											margin: 0px 0px 4px 0px;
											padding: 2px 0px 0px 0px;
											}

										h4	{
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: clamp(1.20rem, 4.8vw, 1.47rem); /* was 4.8vw */
											font-weight: normal;
											text-shadow: none;
											margin: 0px 0px 4px 0px;
											padding: 2px 0px 0px 0px;
											}

										.sActTitles		{
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: clamp(1.13rem, 4.5vw, 1.38rem); /* was 4.5vw */
											font-weight: normal;
											text-shadow: none;
											margin: 0px 0px 4px 0px;
											padding: 0px 0px 0px 0px;
											}

										.aDescriptors {
											color: var(--lie-text-muted);
											font-family: Calibri, Helvetica;
											font-size: 3.5vw; /* was 3.6vw */
											font-weight: normal;
											line-height: 1.15;
											text-shadow: none;
											margin: 1px;
										}	

										.sumSentence	{
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: clamp(1.10rem, 4.4vw, 1.35rem); /* was 4.4vw */
											font-weight: bold;
											text-shadow: var(--lie-text-shadow-soft);
											margin: 1px 0px 5px 0px;
											padding: 0px 0px 0px 0px;
											}	

										p	{
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: clamp(0.98rem, 3.94vw, 1.21rem); /* was 17px */
											font-weight: normal;
											margin: 0px;
											padding-top: 3px;
											line-height: 1.18; /* was 20px — px leading breaks with fluid font-size; 1.18 preserves current ratio */
										}

										li	{
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: clamp(0.98rem, 3.94vw, 1.21rem); /* was 17px */
											font-weight: normal;
											margin-top: 3px 0px 3px -13px;
											padding: 4px 10px 4px 10px;
										}

	
										.discussQuestion li {
											padding: 6px 10px 6px 10px;
											}


										#language li {
											padding: 4px 10px 4px 8px;
											}
											


										/***********************************************************************************************************************************************************************************/	
										/************************activity page content**************************************************************************************************************************************/
										/***********************************************************************************************************************************************************************************/


										.activitydescription {
											display: inline-block;
											position: static;
											width: 96%;
											height: inherit;
											padding: 20px 5px 10px 10px;
											vertical-align: top;
											margin: 0px 0px 10px 0px;
											background-color: var(--lie-bg);
											border-radius: 0px;
											z-index: 0;
										}	

										.activitysection {
											vertical-align: top;
											width: 96%;
											background-color: var(--lie-bg);
											padding: 8px 5px 1px 6px;
											margin: 4px 0px 0px 0px;
										}	
											
										.pcactivitypic {
											display: none;
											}

										.handactivitypic {
											display: block;
											width: 100%;
											padding-top: 0px;
											margin: 8px 0px 0px 0px;
											}

											
										/******social media icons for activities***********/

										.share {
											position: static;
											margin: 5px 15px 0px 0px;
											width: 95%;
										}

										.reload {
											color: var(--lie-text-emphasis);
											font-family: Calibri, Helvetica, Helvetica;
											font-weight: 800;
											font-size: clamp(0.85rem, 3.4vw, 1.04rem); /* was 3.4vw */
										}

										.downloadTable {
											font-family: Calibri; 
											font-size: clamp(0.93rem, 3.70vw, 1.13rem); /* was 16px */
											border-top: solid var(--lie-easy-primary) 0px;
											padding: 0 0 0 0;
											margin:	10px 0 0 0;		
											color: var(--lie-text-primary);
								 
										}
											
										.downloadTable td {
										  padding: 0 15px 0 0;
										  color: var(--lie-text-primary);
										}


										.tipExp  {
											border-radius: 3px;
											padding: 8px 10px 8px 10px;
											position: fixed;
											left: 10vw;
											z-index: 1;	
											visibility: hidden;
											top: 15vh;	
											bottom: auto;
											max-height: 70vh;
											overflow: scroll;
											width: 80vw;
											margin: 0px 0px 0px 0px;
											background-color: var(--lie-tv-primary-bg);
											border: 1px solid var(--lie-text-primary);											
											color: var(--lie-text-emphasis);
											font-family: Calibri, Helvetica, Helvetica;
											font-size: clamp(0.81rem, 3.24vw, 0.99rem); /* was 14px */
										}





											
										/****************audio/video player setup**************/

										.audioframe	{
											display: inline-block;
											position: fixed;
											width: 96%;
											height: 200px;
											vertical-align: top;

											padding: 5px 5px 5px 5px;
											border: 1px solid var(--lie-text-emphasis);
											margin: auto;
										}

										.player {
											position: relative;
											width: 100%;
											height: 35px;
											margin: 20px 0px 0px 0px;
											padding: 0px;
											z-index: 1;
										}

										.inplayer {
											position: relative;
											width: 100%;
											height: 30px;
											margin: 25px 0px 0px 0px;
											padding: 0px 0px 7px 0px;
											z-index: 1;
										}	
											
										.videoframediv {
											position: relative;
											width: 96%;
											height: 0;
											padding:   60% 5px 5px 5px;

										 }
											
										.videoframe {
											display: block;
											position: absolute;
											top:      0;
											left:     0;
											bottom:   0;
											right:    0;
											width:    100%;
											height:   100%;
										}

										/* Style for video player */
										#vid-container {
											position: relative;
											width: 98%;
											padding-bottom: 57%;
											height: 0;
										
										}

										/* Style for fixed video player */
										#vid-container.fixed {
											position: fixed;
											bottom: 5px;
											right: 5px;
											width: 70%;  
											padding-bottom: 40%;
											height: 0;		
											z-index: 1000;
										}

										/* Style for toggle buttons */
										.toggle-button {
											-webkit-appearance: none;
											-moz-appearance: none;
											appearance: none;
											display: block;
											border: 1px solid var(--lie-text-emphasis);
											border-radius: 4px;
											background: none;
											padding: 3px 5px;	        
											margin: 10px 0 10px 5px;
											height: 26px;
											color: var(--lie-text-emphasis);
											font-family: Calibri, Helvetica;
											font-size: clamp(0.75rem, 3.01vw, 0.92rem); /* was 13px */
											font-weight: normal;		
										}
									
										.youtubeplayer {
											position: absolute;
											width: 100%;
											height: 100%;
											border: 0;
										}

										.lie-pinToggle {
											-webkit-appearance: none;
											-moz-appearance: none;
											appearance: none;
											display: block;
											border: 1px solid var(--lie-text-emphasis);
											border-radius: 4px;
											background: var(--lie-bg);
											padding: 3px 15px;
											margin: 4px 10px 8px auto;
											height: 32px;
											color: var(--lie-text-emphasis);
											font-family: Calibri, Helvetica;
											font-size: clamp(0.75rem, 3.4vw, 1.1rem);
											font-weight: 400;
										}

										#disable-button.lie-pinToggle {
											background: var(--lie-bg-subtle);
											color: var(--lie-text-emphasis);
										}	
										
										#enable-button { display: none; }


									
										/****************Natural Language Video player**************/

										.natLangVid {
											height: 46vw;
											width: 80vw;
										}

										.natLangVid2 {
											height: 70vw;
											width: 70vw;
										}


										
										/****************answer buttons setup*******************/

										.answers {
											display: inline-block;
											position: relative;		
											background-color: var(--lie-border);
											border: none;
											border-radius: 4px;
											text-decoration: none;	
											/* font-size: clamp(0.90rem, 3.6vw, 1.10rem); /* was 3.6vw */
											font-size: 3.4vw;
											text-align: center;
											color: #fff;	
											padding: 12px 16px;
											min-height: 34px;
											margin: 4px auto;	
											cursor: pointer;
											transition: all 0.5s;	
											}
											

										.answers::before {
											content: '';
											position: absolute;
											top: 0;
											left: 0;
											width: 100%;
											height: 100%;
											z-index: 1;
											background-color: rgba(255,255,255,0.2);
											transition: all 0.5s;
										}
										.answers:hover::before {
											opacity: 0 ;
											transform: scale(0.5,0.5);
										}
		 
											
											
										.answerdiv {
											margin: 0px 5px;
											}
											
											
										/**************** Dialogue Practice  ************************/

										.diaSpeaker	{
											color: var(--lie-error);
											font-family: Calibri, Helvetica, Helvetica;
											font-size: clamp(0.90rem, 3.6vw, 1.10rem); /* was 3.6vw */
											text-transform: uppercase;
										}

										.diaBullet	{
											margin: 20px 0px 2px -30px;
											font-size: clamp(1.25rem, 5.0vw, 1.53rem); /* was 5.0vw */
											list-style-type: none;			
										}




											
										/**************** Vocab li  and checkbox styling  ************************/
										 
										.pos {
											font-size: clamp(0.87rem, 3.47vw, 1.06rem); /* was 15px */
										 }




											
										.Evcb {
												display: none;
										}



										.vocabli {	
											list-style-type: none;
											margin: 0px 0px 0px 0px;
										}


											
										.vcbHid {
											visibility: hidden;
										}
											
											
										/******************************** Vocab Check marks *************************/

										.vcbCheck {
											position: relative;
											display: inline-block;
											left: -28px;
											margin: 0px -26px 0px 0px;
										}

										.vcbCheck label {
											cursor: pointer;
											position: absolute;
											width: 18px;
											height: 18px;
											top: 5px; left: 2px;
											border-radius: 4px;

											box-shadow: inset 0px 1px 1px var(--lie-bevel-dark), 0px 1px 0px var(--lie-bevel-light);

											background: linear-gradient(to top, var(--lie-checkbox-grad-start) 0%, var(--lie-checkbox-grad-end) 100%);
										}

										.vcbCheck label:after {
											-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
											filter: alpha(opacity=0);
											opacity: 0;
											content: '';
											position: absolute;
											width: 9px;
											height: 4px;
											background: transparent;
											top: 4px;
											left: 3px;
											border: 3px solid var(--lie-tv-primary);
											border-top: none;
											border-right: none;

											-webkit-transform: rotate(-45deg);
											-moz-transform: rotate(-45deg);
											-o-transform: rotate(-45deg);
											-ms-transform: rotate(-45deg);
											transform: rotate(-45deg);
										}



										.vcbCheck input[type=checkbox]:checked + label:after {
											-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
											filter: alpha(opacity=100);
											opacity: 1;
										}
											
											
											
											

											
											
										/****************listen & draw setup**************/
										.drawing {
											width: 95%;
											border: 1px solid var(--warn-red);
											margin: 10px 0px 10px 6px;
											padding: 0px 0px 0px 0px;
										}

										.dict-table {
											width: 98%;
											font-family: Calibri, Helvetica;
											font-size: clamp(0.75rem, 3.01vw, 0.92rem); /* was 13px */
											font-weight: normal;
											color: var(--lie-text-primary);
										}	

										.shapes {
											height: 30px;
											margin: 1px 5px 1px 2px;
										}


										/****************video background setup**************/
											
										.videotable {
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: clamp(0.95rem, 3.8vw, 1.16rem); /* was 3.8vw */
											font-weight: normal;
											text-align: center;
											}
											
										.videopics {
											width: 22vw;
											border: none;
											margin: 2px 0px 2px 0px;
											padding: 0px;
											}

										/****************scriptbox setup**************/
											
										.scriptbox {
											width: 90%;
											background-color: var(--lie-bg);
											padding: 0px 10px 10px 10px;
											margin: 10px auto 10px auto;
											}	


										/****************watch next************************/
										.nextLesson {
											margin: 0 0 0 -26px;
											padding: 9px 0px 9px 32px;
											list-style: none;
											background-image: url(https://www.listeninenglish.com/sitimg/nextIcon.svg);
											background-repeat: no-repeat;
											background-position: left center;
											background-size: 5.6vw;		 
											font-size: clamp(1.05rem, 4.2vw, 1.29rem); /* was 4.2vw */
											position: relative;
										}

										.nextLesson::before {
										  content: "";
										  position: absolute;
										  left: 0;
										  top: 50%;
										  transform: translateY(-50%);
										  width: 5.6vw;
										  height: 5.6vw;
										  background: currentColor;
										  -webkit-mask: var(--lie-next-icon) no-repeat center / contain;
										  mask: var(--lie-next-icon) no-repeat center / contain;
										}

										/****************HAND Activitiy Hidden****************/
										.toggle {	
											display: none;
											}






										/*********************************************************************************************************************************************************************************/
										/******************the dropdown menus in the index********************************************************************************************************************************/
										/*********************************************************************************************************************************************************************************/

										.blurbContainer {
											width: 80vw;
											margin: 0px auto 20px auto;
											padding: 0px;
											border-radius: 0px;
										}

										.selectorContainer {
											width: 70vw;
											margin: 0px auto 0px auto;
											padding: 0px;
											border-radius: 0px;
										}
										.selectButton {
											width: 30vw;
											height: 29vw;
											display: inline-block;
											box-sizing: border-box;
											margin: 1vw 1vw;
											padding: 2.0vw;
											border-radius: 3.0vw;
											border: 1px solid var(--lie-bg);
											transition: 850ms;
											color: var(--lie-bg);
										}
										.selectorTitle {
											display: block;
											font-family: Helvetica;
											font-size: 4.0vw;             /* clamp removed — floored text in a vw box wraps */
											font-weight: normal;
											vertical-align: middle;	
											text-align: center;
											text-shadow: none;	
											margin: 2vw 0px 1vw 0px;      /* was 8px */
											padding: 0px 0px 0px 0px;	
										}
										.selectorLevel {
											display: block;
											font-family: Helvetica;
											font-size: 2.8vw;            /* clamp removed */
											font-weight: normal;
											vertical-align: middle;
											text-align: center;
											text-shadow: none;	
											margin: 0px 0px 0px 0px;
											padding: 0px 0px 0px 0px;	
										}
										.bannerTitle {
											font-family: Calibri, Helvetica, Arial;
											font-size: 4.6vw;             /* clamp removed */
											margin: 0px 0px 1.2vw 0px;    /* was 5px */
											padding: 0px 0px 0px 0px;
										}
										.bannerText {
											font-family: Calibri, Helvetica, Arial;
											font-size: 3.7vw;             /* clamp removed */
											margin: 0px 0px 1.2vw 0px;    /* was 5px */
											padding: 0px 0px 0px 0px;
										}
										.handBanner {
											background-image: url("/sitimg/banner-hand.jpg");	
											background-repeat: no-repeat;
											background-size: cover;
											background-color: var(--lie-border);
											margin: 0px 0px -5px 0px;
											padding: 7vw 0px 7vw 0px;     /* was 30px */
											transition: 1s;
										}

										.selectorIconsOn {
											border-radius: 100%;
											display: block;
											width: 13vw;
											margin: 0px auto;
											box-shadow: var(--lie-shadow-soft);		
										}

										.selectorIconsOff {
											border-radius: 100%;
											display: block;
											width: 13vw;
											margin: 0px auto;
											box-shadow: var(--lie-shadow-soft);		
										}


										/* var(--lie-easy-primary)  */
										.colorEasy {
											border: 1px solid var(--lie-easy-primary)
										}

										#easyButton:hover {
											background-color: rgba(202, 103, 19, 0.05);
										}


										/* var(--lie-tv-primary)  */
										.colorTV {
											border: 1px solid var(--lie-tv-primary)		
										}

										#TVButton:hover {
											background-color: rgba(0, 152, 153, 0.05);
										}


										/* var(--lie-reveal-blue)  */
										.colorNews {
											border: 1px solid var(--lie-reveal-blue)		
										}

										#newsButton:hover {
											background-color: rgba(40, 109, 168, 0.05);
										}


										/* var(--lie-acad-primary)  */
										.colorAcad {
											border: 1px solid var(--lie-acad-primary)		
										}

										#acadButton:hover {
											background-color: rgba(178, 67, 133, 0.05);
										}




										.bbcFrame {
											border-top: 0px solid var(--lie-index-text);  
											border-bottom: 0px solid var(--lie-index-text);  
											border-left: 1px solid var(--lie-index-text);   
											border-right: 1px solid var(--lie-index-text);   
											border-radius: 10px; 
											width: 54vw; 
											padding: 6px 3px 2px 10px;	
											margin:	0px 0px 0px 4vw;
											transition: 2s;
										}

										.bbcTitle {
											color: var(--lie-index-text);  
											font-family: Calibri, Helvetica, Arial; 
											font-size: clamp(0.95rem, 3.2vw, 1.16rem); /* was 3.8vw */
											padding: 0px 0px 0px 0px;
										}

										.bbcText {
											color: var(--lie-index-text);  
											font-family: Calibri, Helvetica, Arial; 
											font-size: clamp(0.80rem, 2.7vw, 0.98rem); /* was 3.2vw */
											padding: 3px 0px 0px 10px;
											line-height: 1.3;
										}
											
										.bbcMediapic {
											display: block;
											width: 12.5vw;
											padding: 0px 0px 0px 0px; 
											margin: 0 1.5vw 0 0;	
											border-radius: 8px;
											float: right;	
										}
												
										.bbcIcon {
											width: 8vw; 
											padding: 5px 10px 10px 5px;
											float: left;
										}

		 






										/****************Unified Lesson Card (desktop)*********************/

										.recentbox {
											max-width: 100%;
											min-width: 0;
											padding: 0px 0px 0px 0px;
											margin: 8px 0px 0px 0px;
										}

										#tvCards, #skCards, #ezCards, #acCards, #statusAll {
											grid-template-columns: minmax(0, 1fr);
										}

									 
										.lieStatusGroup {
											grid-template-columns: minmax(0, 1fr);
											gap: 1.85vw;              /* was 8px */
										}


										.lieSortLabel {
											font-family: Tahoma, Helvetica, Arial;
											font-size: 4.5vw;
											font-weight: 500;
											color: var(--lie-text-muted);
											margin-right: 1.0vw;
											white-space: nowrap;
										}

												
										.lieStatusBar {
											box-sizing: border-box;
											display: flex;
											align-items: center;
											gap: 1.5vw 2.5vw;
											width: 100%;
											padding: 2.5vw 3.0vw;
											margin: 2.0vw 0 2.0vw 0;
											flex-wrap: wrap;
											background-color: var(--lie-bg);
											box-shadow: var(--lie-shadow-soft);
											border-radius: 0px;
										}

										.lieStatusBtn {
											font-family: Tahoma, Helvetica, Arial;
											font-size: 3.9vw;
											font-weight: 500;
											color: var(--lie-text-muted);
											background: none;
											border: none;
											cursor: pointer;
											padding: 1.8vw 1.0vw;
											white-space: nowrap;
											border-bottom: 2px solid transparent;
											transition: color 0.2s, border-color 0.2s;
										}

										.lieStatusBtn:hover {
											color: var(--lie-text-emphasis);
										}

										.lieStatusBtn.active {
											color: var(--lie-accent-blue);
											font-weight: 400;
											border-bottom: 2px solid var(--lie-accent-blue);
										}

										.lieStatusShow {
											margin-left: auto;
											font-family: Calibri, Helvetica;
											font-size: 3.3vw;
											font-weight: normal;
											color: var(--lie-accent-blue);
											text-decoration: none;
											white-space: nowrap;
											padding: 1.5vw 0vw;
										}

										.lieStatusAdv {
											display: none;
											margin-left: auto;
											font-family: Calibri, Helvetica;
											font-size: 3.3vw;
											font-weight: normal;
											color: var(--lie-accent-blue);
											text-decoration: none;
											white-space: nowrap;
											padding: 1.5vw 0vw;
										}

										.lieStatusAdv:hover {
											color: var(--lie-text-emphasis);
										}

										.lieStatusAdvIcon.lieStatusAdvIcon {
											display: inline-flex;
											align-items: center;
											justify-content: center;
											margin-left: auto;
											padding: 2vw;
										}

										.lieStatusAdvIcon .hdrIco {
											width: 5.5vw;
											height: 5.5vw;
										}

										.lieCard {
											display: flex;
											position: relative;
											align-items: stretch;
											min-height: 22vw;
											width: 100%;
											background-color: var(--lie-bg);
											border-left: 1.5vw solid var(--lie-border);
											border-right: 1.5vw solid var(--lie-border);
											box-sizing: border-box;
											border-radius: 4vw 4vw 4vw 4vw;
											box-shadow: var(--lie-shadow-soft);
											overflow: hidden;
											transition: 0.5s;
										}
										.lieCard:hover {
											box-shadow: var(--lie-shadow-strong);
											background-color: var(--lie-card-hover);  
										}
										.lieCard.barEasy   { border-left-color: var(--lie-easy-primary);    }
										.lieCard.barTV     { border-left-color: var(--lie-tv-primary);     }
										.lieCard.barAcad   { border-left-color: var(--lie-acad-primary);   }
										.lieCard.barSkills { border-left-color: var(--lie-skills-primary);  }

										.lieCard.barTV:hover     { border-left-color: var(--lie-tv-primary-dark);   }
										.lieCard.barEasy:hover   { border-left-color: var(--lie-easy-primary-dark);  }
										.lieCard.barAcad:hover   { border-left-color: var(--lie-acad-primary-dark);   }
										.lieCard.barSkills:hover { border-left-color: var(--lie-skills-primary-dark); }

										.lieCard.barEasy   { border-right-color: var(--lie-easy-primary);    }
										.lieCard.barTV     { border-right-color: var(--lie-tv-primary);     }
										.lieCard.barAcad   { border-right-color: var(--lie-acad-primary);   }
										.lieCard.barSkills { border-right-color: var(--lie-skills-primary);  }

										.lieCard.barTV:hover     { border-right-color: var(--lie-tv-primary-dark);   }
										.lieCard.barEasy:hover   { border-right-color: var(--lie-easy-primary-dark);  }
										.lieCard.barAcad:hover   { border-right-color: var(--lie-acad-primary-dark);   }
										.lieCard.barSkills:hover { border-right-color: var(--lie-skills-primary-dark); }
										
										.lieCardBody {
											flex: 1;
											display: flex;
											flex-direction: column;
											justify-content: center;
											padding: 2.5vw 2.5vw 2.5vw 5vw;
											min-width: 0;
											order: 2;
										}

										.lieCardTitle {
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: 4.3vw;
											font-weight: bold;
											line-height: 1.2;
											margin: 0 0 0px 0;
											white-space: nowrap;
											overflow: hidden;
											text-overflow: ellipsis;
										}

										.lieCardSeries {
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: 3.6vw;
											line-height: 1.3;
											margin: 0 0 0px 0;
											white-space: nowrap;
											overflow: hidden;
											text-overflow: ellipsis;
										}
										
										.lieCardTime {
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: 3.6vw;
											line-height: 1.3;
											margin: 0px 0 0 0;
										}
											.lieCardLevel {
											color: var(--lie-text-emphasis);
											font-family: Calibri, Helvetica;
											font-size: 3.6vw;
											line-height: 1.3;
											font-weight: bold;
										}
										
										.lieCardMeta {
											display: flex;
											align-items: center;
											gap: 1.5vw;
										}

										.flag {
											height: 3.0vw;
											vertical-align: middle;
										}
										
										.pdficon {
											height: 2.8vw;
											vertical-align: middle;
											
										}

										.lieCardGrammar {
											color: var(--lie-text-primary);
											font-family: Calibri, Helvetica;
											font-size: 3.6vw;
											margin: 2px 0 0 0;
										}
										
										.lieCardThumbWrap {
									 
											flex-shrink: 0;
											width: 22vw;
											margin: 1.2vw 0px 1.2vw 1.2vw;
											order: 1
											/* no border-radius, no overflow here anymore */
										}

										.lieCardThumb {
											display: block;
											width: 100%;
											height: 100%;
											object-fit: cover;
											border-radius: 10px;   /* moved here — rounds the image directly */
										}

										.lieCardInfoBtn {
											position: absolute;
											top: 50%;
											right: 6px;
											transform: translateY(-50%);
											width: 6.5vw;
											height: 6.5vw;
											display: flex;
											align-items: center;
											justify-content: center;
											background: var(--lie-info-bg);
											color: var(--lie-info-btn);
											font-family: Georgia, serif;
											font-style: italic;
											font-weight: bold;
											font-size: 4.0vw;
											border-radius: 50%;
											border: 2px solid var(--lie-info-btn);
											cursor: pointer;
											z-index: 3;
										}

										.lieCardInfoBtn::after {
											content: "";
											position: absolute;
											inset: -8px;
										}

										.lieCardBlurb {
											position: absolute;
											inset: 0;
											display: flex;
											align-items: center;
											justify-content: center;
											text-align: center;
											padding: 2.5vw 8vw 2.5vw 4vw;;
											background-color: color-mix(in srgb, var(--lie-bg) 94%, transparent);
											color: var(--lie-text-emphasis);
											font-family: Calibri, Helvetica, Arial;
											font-size: 3.8vw;
											line-height: 1.2;
											opacity: 0;
											visibility: hidden;
											pointer-events: none;
											transition: opacity 0.3s;
											z-index: 2;
										}
										.lieCardBlurb.show {
											opacity: 1;
											visibility: visible;
											pointer-events: auto;
										}




										.lieStripPanel {		
											width: 98%;
											box-sizing: border-box;
											margin: 2.0vw auto 2.0vw auto;
											padding: 0 4vw;
											background: var(--lie-bg);
											border-radius: 0px;
											box-shadow: var(--lie-shadow-soft);
											overflow: hidden;
										}

										.lieSortBarTop {
											display: flex;
											align-items: center;
											gap: 0px;
											padding: 1vw 0px 0px 0px;
											font-family: Calibri, Helvetica;
											font-size: 3.9vw;
											font-weight: 400;
											color: var(--lie-text-primary);
										}
										.lieSortBarTop .advSearch { margin-left: auto; }


										.lieStrip-outer {
											position: relative;
											padding: 6px 0 4px 0;
										}

										.lieStrip {
											display: flex;
											gap: 1.5vw;
											overflow-x: auto;
											overflow-y: hidden;
											/* scroll-snap-type: x proximity; */
											scroll-padding-left: 0px;
											scroll-padding-right: 0px;
											padding: 2px 0px 8px 0px;   /* side padding clears the arrow buttons */
											-webkit-overflow-scrolling: touch;
											scrollbar-width: none;         /* firefox */
										}

										.lieStripAllBtn {
											white-space: nowrap;
										}																		

										
										.lieStrip::-webkit-scrollbar { display: none; }

										.lieStripHeader .advSearch {
											color: var(--lie-tv-primary);
											font-weight: 700;
											text-decoration: none;
										}
										.lieStripHeader .advSearch:hover {
											color: var(--lie-tv-primary-dark);
											text-decoration: underline;
										}

										.lieTile {
											scroll-snap-align: start;
											flex: 0 0 auto;
											width: 21vw;
											display: flex;
											flex-direction: column;
											align-items: center;
											background: none;
											border: none;
											font-family: Calibri, Helvetica;
											cursor: pointer;
											padding: 0;
											text-align: center;
										}

										.lieTileImgWrap {
											width: 21vw;
											height: 21vw;
											border-radius: 8px;
											overflow: hidden;
											opacity: 0.92;
											transform: translateY(0);
											box-shadow: 0 0 0 0 transparent;
											transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
										}
										.lieTile img {
											width: 100%;
											height: 100%;
											object-fit: cover;
											display: block;
										}

										.lieTile:hover .lieTileImgWrap,
										.lieTile:focus-visible .lieTileImgWrap {
											opacity: 1;
											transform: translateY(-2px);
										}
										.lieTile:focus-visible { outline: 2px solid var(--lie-tv-primary); outline-offset: 3px; border-radius: 10px; }

										.lieTile.isActive .lieTileImgWrap {
											opacity: 1;
											box-shadow: 0 0 0 3px var(--lie-tv-primary);
										}

										.lieTile.isActive .lieTileName { color: var(--lie-tv-primary-dark); }

										.lieStripArrow {
											position: absolute;
											top: 50%;
											transform: translateY(-50%);
											width: 7.5vw;
											height: 7.5vw;
											border-radius: 50%;
											border: 0;
											background: #aaa;
												box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06);
											display: flex;
											align-items: center;
											justify-content: center;
											cursor: pointer;
											z-index: 3;
											transition: opacity .15s, box-shadow .15s;
										}
										.lieStripArrow:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.08); }
										.lieStripArrow[disabled] { opacity: 0; pointer-events: none; }
										.lieStripArrow.prev { left: -8px; }
										.lieStripArrow.next { right: -8px; }
										.lieStripArrow svg { width: 14px; height: 14px; }
										.lieStripArrow.prev svg { color: var(--lie-bg); }
										.lieStripArrow.next svg { color: var(--lie-bg); }


											
										/****************Story Order Setup******************/
										.storyOrder{ margin: 8px 0 4px; }
										.soHeader{ display: none; font-size: 0.9rem; }
										.soNum{ width: 5.2vw; font-size: clamp(0.80rem, 3.2vw, 0.98rem); /* was 3.2vw */}
										.soControls{ width: 30px; }
										.soUp, .soDown{ width: 33px; height: 28px; font-size: 2.7vw; }
										.soHandle{ width: 30px; height: 55px; }
										.soText{ font-size: clamp(0.95rem, 3.8vw, 1.16rem); /* was 3.8vw */ }
										.soBody{ padding: 5px 6px 5px 12px; }
										.soItem{ display: flex; align-items: stretch; gap: 5px; margin: 1px 0; }
										.soList{ list-style: none; margin: 0 -7px 0 -7px; padding: 0  }



										/****************  Latin & Greek Stems & prefixes ***********************/

										.rt-context-item { margin-bottom: 4.6vw; }        /* was 22px */
										.rt-context-item li { font-size: 4.4vw; }         /* was 20px */
										.rt-context-item p { margin: 1.4vw 0; }           /* was 6px */
										.rt-blank-row { margin: 3.5vw 0; }                /* was 15px */
										.rt-infer-icon { margin-right: 1vw; }             /* was 4px */

										.rt-chart-table {
											width: 100%;
											margin: 3vw 0 5vw 0;                          /* was 14px 0 24px 3% */
										}
										.rt-chart-table th,
										.rt-chart-table td {
											font-size: 3.7vw;                             /* was 18px */
											padding: 1.9vw 1.6vw;                         /* was 8px 10px */
										}
										.rt-chart-table td.rt-icon-cell { width: 8vw; }   /* was 46px */
										.rt-chart-table caption {
											font-size: 4.6vw;                             /* was 22px */
											margin-bottom: 1.4vw;                         /* was 6px */
										}

										.rt-build-item {
											padding: 3.2vw 3.7vw;                         /* was 14px 16px */
											margin-bottom: 4.6vw;                         /* was 20px */
											border-radius: 1.9vw;                         /* was 8px */
										}
										.rt-build-word { margin-bottom: 2.3vw; }          /* was 10px */

										.rt-slots { gap: 2.3vw; margin-bottom: 2.8vw; }   /* was 10px / 12px */
										.rt-slot {
											min-width: 16vw;                              /* was 70px */
											min-height: 32px;                             /* was 25px — touch target */
											padding: 0.5vw 1.2vw;                         /* was 2px 5px */
											border-radius: 1.4vw;                         /* was 6px */
										}

										.rt-tilebank { gap: 1.9vw; }                      /* was 8px */
										.rt-tile {
											padding: 1.4vw 3.2vw;                           /* was 6px 12px — enlarged for touch */
											border-radius: 1.4vw;                         /* was 6px */
											min-height: 32px;
											display: inline-flex;
											align-items: center;
										}

										.rt-build-feedback { margin-top: 1.9vw; }         /* was 8px */



										/* timed reading  */
			
										#tr-passage p         { font-size: clamp(0.98rem, 3.94vw, 1.21rem); line-height: 1.8; } /* was 17px */
										#tr-passage-card-body { padding: 14px 14px 0; }
										#tr-passage-header,
										#tr-passage-footer    { padding: 13px 14px; }
										#tr-modal             { padding: 18px 14px 16px; }
										.m-wpm-num            { font-size: 2.8rem; }
										.spb-dot { width: 21px; height: 22px; border: 1px solid var(--lie-accent-blue); }
										.spb-dots { gap: 3px;}
										#tr-wrap { max-width: 720px; margin: 4px auto 0 auto; padding: 0px 5px 60px; }
										#tr-wrap .activitysection { width: auto; margin: 8px 0; }
										.activitydescriptionread { padding: 18px 15px 14px 15px; margin: 2px 0 0 0; }
										.m-history-table { font-size: clamp(11px, 3.0vw, 13px); }
										.m-history-table td,
										.m-history-table th           { padding: 4px 3px; }
										.m-history-table td:nth-child(3) { white-space: nowrap; }	




										/****************TOEFL 2026 Input******************/

										.cloze-para {
										  font-family: Calibri, Arial, sans-serif;
										  font-size: clamp(1.00rem, 4.0vw, 1.23rem); /* was 4.0vw */
										  line-height: 1.3;  
										  padding: 5px 10px 5px 10px; 
										  background-color: var(--lie-bg-subtle)
										}

										.cloze-wrap { 
										  display: inline-flex; 
										  font-family: Consolas;
										  font-size: clamp(0.95rem, 3.8vw, 1.16rem); /* was 3.8vw */
										  align-items: center; 
										  gap: .08rem; 
										  padding: 0 .1rem; 
										  margin: 0 .10rem; 
										  position: relative; 
										}

										.cloze-input { 
										  width: 1.1rem; 
										  border: none; 
										  border-bottom: 2px solid var(--lie-accent-blue); 
										  text-align: center; 
										  font: inherit; 
										  outline: none; 
										  background: none; 
										}

										.cloze-input:focus { 
										  border-bottom-color: var(--lie-accent-blue); 
										  box-shadow: 0 1px 0 0 rgba(37,99,235,.15); 
										}

										.cloze-prefix, .cloze-suffix { letter-spacing: 0.4em; }

										.cloze-result {
										  font-size: .85rem; 
										  margin-left: .25rem; 
										  display: none; 
										}

										.cloze-wrap.correct { 
										  background: var(--lie-success-bg); 
										  box-shadow: inset 0 0 0 2px #10b98122; 
										  border-radius: 8px; 
										}

										.cloze-wrap.correct .cloze-result { 
										  color: var(--lie-success); 
										  display: inline; 
										}

										.cloze-wrap.incorrect { 
										  background: var(--lie-error-bg); 
										  box-shadow: inset 0 0 0 2px #ef444422; 
										  border-radius: 8px; 
										}

										.cloze-wrap.incorrect .cloze-result { 
										  color: var(--lie-error); 
										  display: inline; 
										}


										.cloze-input.filled {
										  width: 0.75rem;

										}




										/****************icon set up*************************/
										
										.bigicon {
											float: left;
											width: 13vw;
											padding: 8px 14px 8px 4px;
										}

										.icon	{
											float: left;
											width: 11vw;
											padding: 3px 10px 0px 5px;
											}

										.handSelector {
											background: linear-gradient(to bottom, var(--lie-selector-navy) 0%, var(--lie-selector-white) 100%);
											width: 102%;
											padding: 0px 0px 5px 0px;
											margin: -10px 0px 0px -6px;
										}

										.handSelectorHr {
											background-color: var(--lie-selector-navy);
											height: 1px;
											width: 95%;
										}

										table.indextable {
											width: 85%;
											color: var(--lie-text-primary);
											font-family: Helvetica;
											font-size: clamp(1.16rem, 4.63vw, 1.42rem); /* was 20px */
											padding: 0px 0px;
											margin: 10px auto 10px auto;
											}

										table tr td {
											vertical-align: middle;
										}
										
										 .tdright {
											 width: 110px;
										}

										.handindexicon {
											width: 50px;
											border-radius: 100%;
											padding: 0px 0px 0px 0px;
											margin: -2px 0px -5px 35px;	
											box-shadow: var(--lie-shadow-soft);
										}

										.audiovideoicon	{
											width: 14px;
											vertical-align: -10%;
											}

										.titletag {
											font-family: Calibri, Helvetica, Arial;
											font-size: clamp(0.73rem, 2.9vw, 0.89rem); /* was 2.9vw */
											margin: -7px 0px -16px 0px;
											line-height: 1.1;
											padding: 0;
										}



										/****************HAND Activitiy Hidden****************/


										/* var(--lie-easy-primary)  */
										.colorEasyHand {
											border: 1px solid var(--lie-easy-primary)
										}

										/* var(--lie-tv-primary)  */
										.colorTVHand {
											border: 1px solid var(--lie-tv-primary)		
										}

										/* var(--lie-reveal-blue)  */
										.colorNewsHand {
											border: 1px solid var(--lie-reveal-blue)		
										}

										/* var(--lie-acad-primary)  */
										.colorAcadHand {
											border: 1px solid var(--lie-acad-primary)		
										}

										.block {
											transition: 1000ms;
										}

										.gramExample {
											font-family: Times New Roman; 
											font-size: clamp(0.81rem, 3.24vw, 0.99rem); /* was 14px */
											padding: 0 0 0 6px;
										}

										




									}