@charset "utf-8";

html {
  font-family:
    system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Liberation Sans", Ubuntu, Cantarell,
    "Droid Sans", "Nimbus Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  line-height: 1.55;
}
html, body { height: 100%; }

:root { box-sizing: border-box; } 
*, *::before, *::after { box-sizing: inherit; margin:0; padding:0}

body{
  padding-top: 128px;
  width: 100%;
  font-weight:400;
  color: #555;
  font-size: 17px;
  line-height: 1.7;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
iframe { border: 0; }
button, input, textarea, select { font: inherit; }
:focus {outline: 2px solid #930; outline-offset: 2px;}
:focus:not(:focus-visible) {outline: none;}

p {margin: 16px 0}
a {color: #036;}
a, a:any-link, a:link, a:visited, a:hover, a:focus, a:active {text-decoration: none !important; }
a:hover {}
a:hover img, a:focus-visible img {filter: brightness(1.07);}

img, video, canvas, picture { max-width: 100%; height: auto; margin: 0 auto; align-items:center;  display: block; box-shadow: none; background: none; border-radius:2px;}

figure {line-height: 1.2; text-align: center; font-size: clamp(85%, 2vw, 90%)}
figcaption {font-size: clamp(85%, 2vw, 90%); text-align:center;}

svg{vertical-align:text-bottom; max-width:100%; height:auto;}

sub, sup { font-size: 70%; line-height:0; }
sub { vertical-align: sub; }
sup { vertical-align: super; }

h1, h2, h3, h4, h5, h6 {position: relative; color: #336699; font-weight: 600; line-height:1.4}
h1 {margin:32px 0; font-size: clamp(24px, 4.5vw, 32px); padding: 8px 0; }

h2{
  position: relative; isolation: isolate;
  margin: 80px auto 32px;
  font-size: clamp(24px, 3.2vw, 30px);
  inline-size: min(100%, 720px); 
  text-align: center;
  text-wrap: balance;
  /* draw the rule */
   padding-top: 14px;  
   background: linear-gradient(to right, #fff 0%, #fff 20%, #369 50%, #fff 80%, #fff 100%) top center / 100% 1px no-repeat;
}

h2[kicker]::before{
  content: attr(kicker);
  position: absolute;
  left: 50%;
  top: 0;                            /* align to the rule */
  transform: translate(-50%, -50%);  /* center on the rule line */
  display: inline-block;
  line-height: 1.2;
  padding: 0 20px;
  background: #fff;                  /* must match the page bg */
  color: #369;
  font-size: 18px;
  font-weight:400;
  white-space: nowrap;
  z-index: 1;
}

/* Left-aligned H3 with a leading kicker slot */
h3{
  position: relative;
  margin: 32px 0 16px;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
  padding-left: 1.5em;
  }

/* Kicker content in the slot */
h3::before{
  content: attr(kicker);            /* e.g., <h3 kicker="3."> */
  position: absolute;
  left: 0px;
  top: 4px;
  color: #369;
  font-size: 80%;
  font-weight: 400;
}

/* Fallback when no kicker provided */
h3:not([kicker])::before{
  content: "\2756"; 
}


h4 {font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
 background: linear-gradient(to right, #369 0%,#369 15%, #fff 70%, #fff 100%)  0 100% / 100% 1px no-repeat; 
  margin: 24px 0 16px 0;
}
h4::before {
  content: "\2756";
  padding-right: 8px;
}

hr {clear: both; height: 1px; border-width: 0; background-color: #ccc}

table {  border-collapse: collapse;  border-spacing: 0; margin: 16px 0; width: 100%; font-size: clamp(85%, 2vw, 90%)}
th, td {border: 1px solid #999; padding: 10px 0.2vw 10px 1.5vw; font-weight: normal; text-align: left;}
th {background:#eee; color:#000;}
th:first-child, td:first-child {border-left: none;}
th:last-child, td:last-child {  border-right: none;  padding-right: 0;}

table li {margin: 0; padding: 8px 0; line-height: 1.2}
table p {margin: 12px 0;}
table img {mix-blend-mode:multiply;}

ul, ol {margin: 24px 0}
ul li, ol li {list-style-position: outside; padding: 8px 0;}
ul li {list-style-type:circle;}
ol li::marker{font-size: 80%;}

ul.dia-mond li {list-style-type:none; list-style-position:inside; padding-left:24px }
ul.dia-mond li::before {content: "\25C7";
  color:#69c;
  font-weight:100;
  display: inline-block;
  margin-left: -24px;
  margin-right: 10px;}
  
ul.box-check li {padding-left: 32px; margin-left:0; list-style-type:none;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20"><path fill="none" stroke="%23369" stroke-width="1" d="M18.5,18.1H1.9V1.5h16.6V18.1z M4.8,10.7l5.3,4.6l6-10.6"/></svg>'); background-repeat:no-repeat; background-position: 0 14px;}

ul.box-uncheck li, side-bar li{padding-left: 32px; margin-left:0; list-style-type:none; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" ><path fill="none" stroke="%23369" stroke-width="1" d="M18.5,18.1H1.9V1.5h16.6V18.1z"/></svg>'); background-repeat:no-repeat; background-position: 0 14px;}

.grid-321 {display:grid; 
grid-template-columns: repeat(3, minmax(0, 1fr)); 
column-gap: 2%; margin:0;}
.grid-321 li {white-space: nowrap;	text-overflow: ellipsis; overflow: hidden;}

@media (max-width: 560px) {.grid-321 {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 380px) {.grid-321 {grid-template-columns: 1fr ;}}

.grid-21 {display:grid; grid-template-columns: repeat(2, minmax(0, 1fr));	gap: 0 2%;	margin: 16px 0;}
.grid-21 figure {display:block; margin:16px 0; width: 100%;}
.grid-21 img {width:100%;}
@media only screen and (max-width: 640px) {.grid-21 {grid-template-columns: 1fr ;}}

line-words {display:block; border-top:1px solid #ccc; margin: 32px auto 0 auto; width:80%;text-align: center;}
line-words span {width:fit-content; padding: 0 16px; background:#fff; position:relative; top:-20px; font-size: 90%; color:#999;}

corner-braket {
  color: #336699;
  display:inline-block;
  margin: 0 -8px;
  white-space:nowrap;
}

corner-braket::before {
  content: "\231C"; /* TOP LEFT CORNER */
  color:#69c;
  position:relative;
  left: 8px;
  font-size: 120%;
}

corner-braket::after {
  content: "\231F"; /* BOTTOM RIGHT CORNER */
  color:#69c;
  position:relative;
  bottom: -4px; left:-8px;
  font-size: 120%;
}




box-a {display:block; border: solid 1px #9cf; border-radius: 6px; padding: 16px; margin: 42px 0;}
box-a>up-words {display:block; font-size: 90%; color:#69c; line-height:20px; background: #fff;  padding: 8px; margin:-36px 0 0 8px; width:fit-content;}

box-a>down-words{display:block; font-size: 90%; color:#69c; line-height:20px; background: #fff;  padding: 8px; margin-bottom:-32px; margin-left: auto; position:relative; right:16px; width:fit-content;}

box-a p{margin:8px 0}

key-words {font-size: 90%; color: #369; border: solid 1px #69c; padding: 0 6px 2px 6px; border-radius: 8px;}
/*
key-words {font-size: 100%; color: #fff; border: solid 1px #ddd; padding: 0 8px; border-radius: 8px; background:#999}*/

right-link {display:block; margin: 16px 0 16px auto; width:fit-content}
right-link a {font-size: 85%;  line-height: 110%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
right-link a::after {content: "\25B7"; color:#69c; font-weight:100; display: inline-block; padding-left: 8px; transition: all 0.5s ease; }
right-link:hover a::after { content: "\25B7"; color:#930; margin-right:-8px;}

down-load {display:block; text-align:right; margin: 16px 0;}
down-load a {font-size: 90%; padding: 8px; line-height: 110%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
down-load a::before { content: "\21A7"; padding: 0 8px; margin-right:8px; color:#69c; border-bottom: 2px solid #69c; border-radius:8px; }
down-load:hover a::before {color: #930; vertical-align:-4px;}


header {
   background: linear-gradient(to bottom, rgba(0, 51, 102, 0.95) 0%, rgba(51, 102, 153, 0.95) 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(0);
  transition: transform 1s ease;
  z-index: 999;
  width: 100%;
  box-shadow: 0 12px 8px -12px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid #69c;
  border-top: 1px solid #369;
}
/* hide only the top bar (48px = 32px bar + 8px top margin + 8px bottom margin) */
header.is-compact { transform: translateY(-48px); will-change: transform;}

header a {font-size:16px; color:#fff; text-decoration: none; transition: text-shadow .15s ease;}

header a:hover {color:#fc6}
  
menu-1 {position:relative; display: flex;  justify-content:flex-end; gap:0; width:100%; max-width:1300px; margin:0 auto; padding: 10px 6% 10px 0;}
slogan {position: absolute; top: 20px; left: 2%; line-height: 1.5; font-size:17px;}
show-1 {display:inline; font-style:italic; color:#9cf;} 
show-2{display:none; white-space: nowrap; color: #9cf; line-height: 1.4;  clip-path: inset(0 100% 0 0);
  animation: reveal 1.5s ease-out forwards;}
@keyframes reveal {to { clip-path: inset(0 0 0 0); }}


menu-1 a {
  display: inline-block;
  padding: 0 2%;
  line-height: 36px;
  height:36px;
  border-left: solid 1px #69c;
  border-bottom: solid 1px #69c;
  text-decoration: none !important;
  }
a#about2, a#store2, a#advantage2 {display: none; }

a#community {border-left:none;}

nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  max-width: 1300px;
  margin: 16px auto;
  padding: 0 4%;
  white-space: nowrap;
  overflow: visible;
}
nav a {display:inline-block; text-decoration: none !important; }

#logo {margin-top: -8px; }

#slogan2 {height:0; display:none;}
#logo path { fill:none; stroke-width:1px; }
@keyframes rotate-gear { from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
@keyframes gear1-intro { from {transform: rotate(0deg);} to {transform: rotate(540deg);}}  
@keyframes gear2-intro { from {transform: rotate(0deg);} to {transform: rotate(-720deg);}}
@keyframes gear2-intro-color { 0%   { stroke: #fff; } 100% { stroke: #69c; }}
#gear1{stroke:#fff; transform-origin:153.8px 18.95px; animation: rotate-gear 16s linear infinite, gear1-intro 6s ease-out 1;}
#gear2{stroke:#69c; transform-origin:175.45px 11.65px; animation: rotate-gear 12s linear infinite reverse, gear2-intro 6s ease-out 1, gear2-intro-color 6s ease-out 1;}
a#home:hover #gear1 { animation: rotate-gear 4s linear infinite; }
a#home:hover #gear2 { stroke:#fff; animation: rotate-gear 3s linear infinite reverse; }

#logo-letter{stroke:#fff; transition: stroke 1s ease;  stroke-dasharray:1; stroke-dashoffset:1; animation-name: draw, tint; animation-duration: 7s, 6s; animation-timing-function: linear, ease;
 animation-fill-mode: forwards, none;}
@keyframes draw{to{ stroke-dashoffset:0; }}
@keyframes tint{0%, 70% { stroke:#69c; } 100% { stroke:#fff; }}
a#home:hover #logo-letter{stroke:#69c;}

header:has(nav a#home:hover) menu-1 show-1 { display: none; }
header:has(nav a#home:hover) menu-1 show-2{display: inline-block}


#equip:hover svg path, #equip:hover svg circle {transform: rotate(360deg); stroke: #fff; transform-origin: 50% 41.67% 0; transition: transform 2s ease}

#warranty {position:relative; overflow: visible;}
#warranty svg{
  /*display:block;                  avoids baseline gap */
  transform-box: fill-box;       /* consistent origin */
  transform-origin: right;/* match your span */
  opacity:1;
  transform: scale(1);
  visibility: visible;
  /* same timing style you used for the span */
  transition:
    opacity .9s ease,
    transform .9s ease,
    visibility 0s linear 0s;     /* visible immediately when unhovering */
}

#warranty span {position:absolute; top: -12px; left:-8px; color:#fff; display:inline-block;z-index:10; line-height:1; font-size:16px;  white-space: nowrap;
opacity: 0;
visibility: hidden;
transform: scale(0.85);
transform-origin: right bottom;
  /* exaggerated timing so it’s obvious */
  transition:
    opacity .9s ease,
    transform .9s ease,
    visibility 0s linear .9s;  /* delay hide until fade finishes */
}
@media (max-width: 600px){#warranty {position:relative; overflow: visible;}
#warranty span {position:absolute; top:6px; left:0px; color:#fff; display:inline-block;z-index:10;  line-height:1; font-size:16px; white-space: nowrap;
	
/* hidden state (animatable) */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85);
  transform-origin: right bottom;

  /* exaggerated timing so it’s obvious */
  transition:
    opacity .9s ease,
    transform .9s ease,
    visibility 0s linear .9s;  /* delay hide until fade finishes */
	}
}
	
#warranty:hover svg {opacity:0;
  transform: scale(0);
  visibility: hidden;
  transition:
    opacity .9s ease,
    transform .9s ease,
    visibility 0s linear .9s;    /* delay hide until fade finishes */}

#warranty:hover span {
  opacity: 1;
  visibility: visible;    /* show immediately */
  transform: scale(1);
  transition:
    opacity .9s ease,
    transform .9s ease,
    visibility 0s;        /* no delay when showing */
}


@keyframes draw-advantage { to { stroke-dashoffset: 0;}}
#advantage:hover svg path {stroke: #fff; animation: draw-advantage 1.2s forwards infinite linear; stroke-dasharray: 100; stroke-dashoffset: 100; animation-iteration-count: 1;}

#FAQ:hover svg {transform: rotateY(360deg); transform-origin: 50.1% 50.1% 0; transition: transform 1.2s linear;}
#FAQ:hover svg path {stroke: #930;}

@keyframes map-bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px);} 60% {transform: translateY(-10px);}}
#sitemap:hover svg {animation: map-bounce 2s infinite;}

#store svg, #store2 svg {
  transform: translate3d(0,0,0);    /* GPU composite */
  transition: transform .45s cubic-bezier(.22,.61,.3,1); /* smooth ease-out */
  will-change: transform;
  pointer-events:none;  }
#store:hover svg, #store2:hover svg {transform: translate3d(4px,0,0);}



/***RE-ARRANGE MENU****/
@media (max-width: 900px) {a#store {display: none;} a#store2 {display: inline-block}}
/*@media (max-width: 880px) {a#advantage {display: none;} a#advantage2 {display: inline-block;}}*/
@media (max-width: 750px) {a#about {display: none;} a#about2 {display: inline-block;} a#community svg {display:none} menu-1{padding-right:2%}}
@media (max-width: 680px) {a#store2 svg{display:none}}
@media (max-width: 680px) {a#engineering svg{display:none}}

/***Nav CHANGE to 2 rows *******/
@media (max-width: 600px) {
	nav {margin: 10px auto}
	nav a {display: flex; flex-direction: column; align-items: center; gap:0px;} 
	#logo {margin-top:-8px; width:180px}
	header a {font-size: 15px;}	
	a#engineering svg{display:inline-block}
	a#store2 svg{display:inline-block}
	a#advantage {display:flex; flex-direction: column; align-items: center; gap:0px;}
	a#advantage2 {display:none}
	slogan {display:none}
	#slogan2 {display:block; color:#9cf;overflow: visible; font-style: italic; font-size:14px; margin-left:-6px}
	}
	
	
@media (max-width: 480px) { header a {font-size: 14px} #logo {width:160px}}

@media (max-width: 420px) { header a {font-size: 14px} nav {padding:0 2%}}

@media (max-width: 400px) {header a {font-size: 13px; } }

@media (max-width: 380px) {header a {font-size: 12px; } #logo {width:140px; margin-top:-4px;} #slogan2{font-size:13px} a#store2 svg {display:none;} }

@media (max-width: 340px) {header a {font-size: 10px} #logo {width:120px;} #slogan2{font-size:12px} }


/**** Mid Body ***/
mid-body {display: block;  max-width: 960px; margin: 0 auto;}

/*** main ******/
main{font-size:17px; color: #444; line-height: 1.7; margin-top:0px; padding: 0 4%}
@media (min-width: 700px)  { main { font-size: 18px; line-height:1.8 }}
@media (min-width: 1000px) { main { font-size: 19px; color:#555}}
@media (min-width: 1200px) { main { font-size: 21px; color: #666} p{margin:32px 0}}
@media (min-width: 1400px) { main { font-size: 22px; color: #666}}


breadcrumb {display:block; font-size: 80%; color:#999; white-space: nowrap; text-overflow: ellipsis;  overflow: hidden;}

right-flex-reverse-48{display:block; }
right-flex-reverse-48 figure {float:right; margin-left: 10px; margin-top:12px; width:48%}
@media (max-width:720px){right-flex-reverse-48{display:flex;  flex-direction: column-reverse; margin-top:-16px } right-flex-reverse-48 figure{width:100%;  margin-left:0} }

right-flex-reverse-33{display:block}
right-flex-reverse-33 figure {float:right; margin-left: 10px; margin-top:12px; width:33%}
@media (max-width:600px){right-flex-reverse-33{display:flex; flex-direction: column-reverse; margin-top:-16px} right-flex-reverse-33 figure{width:100%; margin-left:0} }

left-flex-reverse-48{display:block}
left-flex-reverse-48 figure {float:left; margin-right: 16px; margin-top:12px; width:48%}
@media (max-width:720px){left-flex-reverse-48{display:flex; flex-direction: column-reverse; margin-top:-16px} left-flex-reverse-48 figure{width:100%; margin-right:0;}}

left-flex-reverse-33{display:block;}
left-flex-reverse-33 figure {float:left; margin-right: 16px; margin-top:10px; width:33%}
@media (max-width:600px){left-flex-reverse-33{display:flex; flex-direction: column-reverse; margin-top:-16px} left-flex-reverse-33 figure{width:100%; margin:0 auto}; }

/*** side bar ******/
side-bar {width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 3%; margin-top: 64px; padding: 0 4%; font-size: 16px; line-height: 140%; border-top:solid 1px #ccc; border-bottom:solid 1px #ccc;}

side-bar a {color: #666;}
side-bar dl {margin: 32px 0}
side-bar dt {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 42px;
  color: #333;
  text-align: center;
  background: #eee;
}
side-bar dd {
  position: relative;
}
side-bar dd span {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 20%;
  z-index: 99;
  font-size: 20px;
  color: #fff;
  padding: 6px 0;
  background-color: rgba(50, 50, 50, 0.5);
}

in-side {display:block; margin:32px 0}
in-side a {display: block; padding: 12px 0; margin-left: 24px}
in-side a::before {  content: "\25B7";
  color:#69c;
  font-weight:100;
  display: inline-block;
  margin-left:-24px;
  margin-right: 10px;}
in-side a:hover::before {color: #c30; font-weight:900; }

side-bar dl img {width: 100%;}
side-bar>no-show {display:none;}

@media (max-width:560px){side-bar{display:block;}}


@media (min-width: 1080px) {
  mid-body {display:grid; grid-template-columns: 1fr 320px; align-items:start; gap: 0; max-width: 1300px; border-bottom:solid 1px #ccc; padding-bottom: 16px;}
	main {border-right:solid 1px #ccc;}
  side-bar {
	display: block;
	border: none;
	margin-top: 16px;
	position: sticky;
    top: 108px;
	padding: 0 24px; }
side-bar>no-show{display:block}	}


footer {max-width: 1300px; margin: 0 auto;}
bottom-line {display: block; border-bottom: solid 1px #999; text-align:center; }
bottom-line a {display: inline-block; line-height: 14px; border-left:solid 1px #ccc; padding:0 1.5%; text-decoration: none; font-size: 14px;}
bottom-line a:first-child {border-left:none;}


contact-form {display: block; margin-top:48px;}
contact-form iframe {
  width: 100%;
  height: 560px;
  border: none;
}
@media (max-width:576px){contact-form iframe{height:720px}}

edge-pop, edge-pop-button, edge-pop-content { display:block; }
#toggleX { display:none; }
edge-pop-button{
  position:fixed; bottom:60px; right:0;
  width:32px; height:36px;
  z-index:99998;
  border-top:1px solid #9cf;
  border-bottom:1px solid #9cf;
  border-left:1px solid #9cf;
  border-radius:24px 0 0 24px;
  background:rgba(250,250,250,.5);
  padding:4px 1px 3px 4px;
  box-shadow:0 12px 8px -12px rgba(0,0,0,.3);
  user-select:none;
  isolation:isolate;}
edge-pop-button > label{ position:absolute; inset:0; cursor:pointer; }
edge-pop-button svg{
  position:absolute; top:4px; left:4px;
  width:26px; height:26px;
  pointer-events:none; overflow:visible; display:block;}
edge-pop-button .gear  { z-index:1; }
edge-pop-button .x-icon{ z-index:2; display:none; }
#toggleX:checked ~ edge-pop-button .x-icon { display:block; }
edge-pop-content{
  display:none;
  position:fixed; bottom:50px; right:0;
  width:80%; max-width:600px;
  background: linear-gradient(to bottom, rgba(0, 51, 102, 1) 0%, rgba(51, 102, 153, 1) 50%, rgba(0, 51, 102, 1) 100%);
  color:#eee;
  padding:0 24px 16px 24px;
  border:1px solid #ccc;
  border-radius:24px 0 0 24px;
  box-shadow:0 12px 8px -12px rgba(0,0,0,.3);
  z-index:9999;}
#toggleX:checked ~ edge-pop-content { display:block; }



/**** Accordion ***/
details { border-bottom: 1px solid #ddd;  background: #fff;  border-radius: 0;clear:both;}
details p { margin: 16px 0; }
details ul, details ol { margin: 0; }

summary {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 12px 8px 12px 32px; /* room on the right for the icon */
  list-style: none;
  outline: 0;
}

summary::-webkit-details-marker,
summary::marker {
  display: none;
  content: "";
}

summary:hover { background: #f9f9f9; }
details[open] > summary { background: #f5f5f5; color: #369;}

/* ▼ / ▽ icon on the right */
summary::before {
  content: "\25BD";  
  font-size: 80%;
  color:#69c;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%) scaleY(1);
  transform-origin: 50% 50%;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

details[open] > summary::before {
  transform: translateY(-50%) scaleY(-1); /* flip it */
}

summary:hover::before {
  color: #930;
}

/* panel part – you can keep your existing fade if you like */
details > d-panel {
  display: block;
  padding: 1px 6px 1px 10px;
  opacity: 0;
  margin: 0;
}
details:not([open]) > d-panel { animation: none !important; }
details[open] > d-panel { animation: acc-fade .9s ease-out both; }

@keyframes acc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Right-Aligned Title  */
details.single{border-top:solid 1px #ccc; margin:32px 0}
details.single summary {background:#f9f9f9}
details.single[open] summary {}
details.single[open] d-panel {background: linear-gradient(to bottom, #f7f7f7 0%, #fff 10%, #fff 90%, #f7f7f7 100%);}

details.title-right{
  border:none; border-radius:8px; font-size:95%;
  margin:24px 0 24px 24px;
}
details.title-right:hover { }
details.title-right[open] { box-shadow:1px 2px 5px #bbb; border:1px solid #ccc;background: linear-gradient(to bottom, #f7f7f7 0%, #fff 10%, #fff 90%, #f7f7f7 100%); }
details.title-right > summary{
 background:#fff; 
 margin-left:auto; color:#369;
  width:fit-content;
  line-height:110%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}


details.title-right[open] > summary{text-align:left; background: none; border-bottom:solid 1px #eee}
details.title-right d-panel {padding:0 8px 0 16px}

details.index {border-top:solid 1px #ccc; margin:32px 0}
details.index[open] {border-bottom:none}
details.index summary{background:#fcfcfc}
details.index[open] summary{border-bottom:solid 1px #ddd}
details.index ol {font-size:87%; column-count:2; column-gap:32px; column-rule:1px solid #ddd;}
details.index ol li {border-bottom: 1px solid #ddd; margin: 0px; list-style-position:inside; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
details.index li:hover {background:#fff; }
details.index > d-panel {background: #fcfcfc}

/******** Tabs — compact radio version (no JS) ********/
tab-4{
  display:block;
  position:relative;
  margin:32px 0;
  border:solid 1px #ccc;
  padding-top:0;
  white-space: nowrap;
  overflow-x: auto; /* prevent wrapping; allow scroll if tight */
  /*box-shadow: 0 6px 10px -6px rgba(0,0,0,.25);*/
}
tab-4 p {margin: 16px 0;}

/* Hide radios but keep them togglable via labels */
tab-4 > input[type=radio]{ position:absolute; opacity:0; }

/* Tab faces (direct <label> elements) */
tab-4 > label{
  position:relative; /* for ::after mask */
  display:inline-block;
  height:28px; line-height:28px;
  /* Fallback padding first */
  padding:0 24px;
  font-size:90%;
  background:#eee; color:#036; cursor:pointer; user-select:none;
  border:1px solid #999; border-radius:8px 40px 0 0;
  border-right-width:2px; vertical-align:bottom;
  outline:none;
  margin-left:-12px;
  border-bottom: none;}

tab-4 > label:first-of-type{ margin-left:20px; }

/* Upgrade padding when clamp() is supported */
@supports (padding: clamp(16px, 3vw, 48px)) {
tab-4 > label{ padding:0 clamp(16px, 3vw, 48px); }}

/* Focus ring: fallback + modern */
tab-4 > label:focus{ outline:2px solid #369; outline-offset:2px; }
tab-4 > label:focus:not(:focus-visible){ outline:none; }
tab-4 > label:focus-visible{ outline:2px solid #369; outline-offset:2px; }

/* z-index slope (left tabs above right tabs) */
tab-4 > label:nth-of-type(1){ z-index:5; }
tab-4 > label:nth-of-type(2){ z-index:4; }
tab-4 > label:nth-of-type(3){ z-index:3; }
tab-4 > label:nth-of-type(4){ z-index:2; }
tab-4 > label:nth-of-type(5){ z-index:1; }

/* ----- Custom panel tags ----- */
panel-1, panel-2, panel-3, panel-4, panel-5{ width: 99.5%;
  display:none; width:auto; padding:2%;
  border:1px solid #999; background:#fff;
  position:relative; z-index:0; white-space: normal;
  border-top: 1px solid #999;   /* single baseline across */
}

/* Show selected panel */
#r1:checked ~ panel-1{ display:block; }
#r2:checked ~ panel-2{ display:block; }
#r3:checked ~ panel-3{ display:block; }
#r4:checked ~ panel-4{ display:block; }
#r5:checked ~ panel-5{ display:block; }

/* Active tab styling + mask to hide the baseline under it */
#r1:checked ~ label:nth-of-type(1),
#r2:checked ~ label:nth-of-type(2),
#r3:checked ~ label:nth-of-type(3),
#r4:checked ~ label:nth-of-type(4),
#r5:checked ~ label:nth-of-type(5){
  background:#fff; color:#369; z-index:99;}
	
#r1:checked ~ label:nth-of-type(1)::after,
#r2:checked ~ label:nth-of-type(2)::after,
#r3:checked ~ label:nth-of-type(3)::after,
#r4:checked ~ label:nth-of-type(4)::after,
#r5:checked ~ label:nth-of-type(5)::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#fff; pointer-events:none;}

/* ----- Animations (subtle jump; longer fade) ----- */
@keyframes tab-pop{
  0%,100% { transform: translateY(0); }
  35%     { transform: translateY(-1px); }
  65%     { transform: translateY(-1px); }}
@keyframes panel-pop{
  0%   { transform: translateY(0); opacity: 0; }
  35%  { transform: translateY(-1px); opacity: .6; }
  65%  { transform: translateY(-1px); opacity: .9; }
  100% { transform: translateY(0); opacity: 1; }}
#r1:checked ~ label:nth-of-type(1),
#r2:checked ~ label:nth-of-type(2),
#r3:checked ~ label:nth-of-type(3),
#r4:checked ~ label:nth-of-type(4),
#r5:checked ~ label:nth-of-type(5){
  animation: tab-pop .46s cubic-bezier(.2,.7,.3,1.2);
  will-change: transform;}
#r1:checked ~ panel-1,
#r2:checked ~ panel-2,
#r3:checked ~ panel-3,
#r4:checked ~ panel-4,
#r5:checked ~ panel-5{
  animation: panel-pop .60s cubic-bezier(.2,.7,.3,1.2);
  will-change: transform, opacity;}

/* Small screens: remove side borders + side padding on panels */
@media (max-width: 480px){
tab-4 {border-left: none; border-right: none; box-shadow: none;}
tab-4 > label:first-of-type{ margin-left:12px; }
tab-4 > Label {font-size: 85%;height:24px; line-height:24px;}
tab-4 > panel-1, panel-2, panel-3, panel-4, panel-5{
    padding-left: 0; padding-right: 0;
    border-left: none; border-right: none;}}
@media (max-width: 420px){tab-4 > label:nth-of-type(4){ display: none; } tab-4 > label:first-of-type{ margin-left:6px; }}
@media (max-width: 359px){tab-4 > Label {font-size: 80%; padding: 0 12px;} tab-4 > label:first-of-type{ margin-left:4px; }}