@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; }
:where(*, *::before, *::after) { margin: 0; padding: 0; }

.grid-321 {display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2%; margin:0;}
.grid-321 li {white-space: nowrap;	text-overflow: ellipsis; overflow: hidden; margin:0; padding: 8px 0px 8px 32px;	
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="none" stroke="%23777" 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;}
@media (max-width: 560px) {.grid-321 {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 380px) {.grid-321 {grid-template-columns: 1fr ;}}


box-a {display:block; border: solid 1px #ccc; border-radius: 6px; padding: 16px; margin-top: 32px; margin-bottom: 32px;}
box-a>up-words {display:block; font-size: 90%; color:#369; 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:#369; line-height:20px; background: #fff;  padding: 8px; margin-bottom:-32px; margin-left: auto; position:relative; right:16px; width:fit-content;}


key-words {font-size: 90%; color: #369; border: solid 1px #369; padding: 4px 8px 4px 8px; border-radius: 8px; background:#fcfcfc}


right-link {display:block; margin: 16px 0 16px auto; width:fit-content}
right-link a {font-size: 80%; padding: 8px 8px 8px 6vw; line-height: 110%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
right-link a::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='17' viewBox='0 0 16 17'%3E%3Cpath fill='none' stroke='%23999' d='M13.4,7.3l3.1-3.5l-3.2-3.6 M13.2,10.9v4.4H0.5V2.2h5.4 M5.9,9.8c0-4.1,2.2-5.9,10.1-5.9'/%3E%3C/svg%3E"); padding-left: 8px; position:relative; left: 0; bottom: -2px; transition: all 0.5s ease; }

right-link:hover a::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='17' viewBox='0 0 16 17'%3E%3Cpath fill='none' stroke='%23930' d='M13.4,7.3l3.1-3.5l-3.2-3.6 M13.2,10.9v4.4H0.5V2.2h5.4 M5.9,9.8c0-4.1,2.2-5.9,10.1-5.9'/%3E%3C/svg%3E"); left:4px; bottom: 0px;}


down-load {display:block; text-align:right; margin: 16px 0;}
down-load a {font-size: 85%; padding: 8px; line-height: 110%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
down-load a::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.3' height='16' viewBox='0 0 18.3 16'%3E%3Cpath fill='none' stroke='%23999' d='M16.8,10.2V15c0,0.1-0.1,0.2-0.301,0.2H1.6c-0.1,0-0.2-0.101-0.2-0.2v-4.8 M4.6,6.1L9,10.5	L13.5,6 M9.1,9.9V0.4'/%3E%3C/svg%3E"); padding-left: 8px; position:relative; left:0; bottom:0; transition: all 0.5s ease;  }

down-load:hover a::after{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.3' height='16' viewBox='0 0 18.3 16'%3E%3Cpath fill='none' stroke='%23930' d='M16.8,10.2V15c0,0.1-0.1,0.2-0.301,0.2H1.6c-0.1,0-0.2-0.101-0.2-0.2v-4.8 M4.6,6.1L9,10.5	L13.5,6 M9.1,9.9V0.4'/%3E%3C/svg%3E");  bottom:-2px}

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;
}
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; border-}
a:hover {}
a:hover img, a:focus-visible img {filter: brightness(1.07);}

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

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="20" height="20"><path fill="none" stroke="%23777" 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="20" height="20"><path fill="none" stroke="%23777" stroke-width="1" d="M18.5,18.1H1.9V1.5h16.6V18.1z"/></svg>'); background-repeat:no-repeat; background-position: 0 14px;}

side-bar li{background-position: 0 10px;}
side-bar li:hover {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="none" stroke="%23930" 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 10px;}

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;}

iframe { border: 0; }
button, input, textarea, select { font: inherit; }

:focus {outline: 2px solid #930; outline-offset: 2px;}
:focus:not(:focus-visible) {outline: none;}

sub, sup { font-size: 80%; 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;
  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: "\25C7"; 
}


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 0 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;}
/*
@media (max-width: 600px){table {font-size: 90%;}
table td {padding: 6px 2px 6px 6px; vertical-align: middle;}}*/

header {
  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);
  background: #fff;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
/* 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:#000; text-decoration: none;}
  
menu-1 {position:relative; display: flex;  justify-content:flex-end; gap:0; width:100%; max-width:1300px; margin:0 auto; padding: 10px 24px 10px 0;}
slogan {position: absolute; top: 16px; left: 2%; line-height: 1; font-size:14px; font-style:italic; color:#999;}
menu-1 a {
  display: inline-block;
  padding: 0 2%;
  line-height: 32px;
  height:32px;
  border-left: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  text-decoration: none !important;
  }

a#about2, a#store2, a#benefit2 {display: none; }
a#about2:hover, a#store2:hover, a#benefit2:hover, a#guide:hover, a#research:hover {color: #930;}
a#research {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; margin-left: 1%;}
#logo-ring {transform-origin: 20px 20px; animation: rotate-slow 24s linear infinite;}
a:hover #logo-ring {animation: rotate-fast 2s ease-out;}
@keyframes rotate-slow {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
@keyframes rotate-fast {from {transform: rotate(0deg);} to {transform: rotate(720deg);}}

#equip:hover svg path, #equip:hover svg circle {transform: rotate(720deg); stroke: #930; 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:#930; 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: 580px){#warranty {position:relative; overflow: visible;}
#warranty span {position:absolute; top:6px; left:0px; color:#930; 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-heart { to { stroke-dashoffset: 0;}}
#benefit:hover svg path {stroke: #930; animation: draw-heart 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;}
#sitemap:hover svg path {stroke: #930;}

#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: 1000px) {a#store {display: none;} a#store2 {display: inline-block}}
@media (max-width: 880px) {a#benefit {display: none;} a#benefit2 {display: inline-block;}}
@media (max-width: 750px) {main {font-size: 112%; line-height: 1.65;}  a#about {display: none;} a#about2 {display: inline-block;} slogan {display:none}}

/***Nav CHANGE to 2 rows *******/
@media (max-width: 580px) {
	nav {margin: 8px auto}
	nav a {display: flex; flex-direction: column; align-items: center; gap:0px;} 
	#logo {margin-top:3px; margin-left:0;}
	header a {font-size: 15px;}	}

@media (max-width: 512px) { header a {font-size: 14px; }
a#research {display: none;}
a#about2 {border-left: none;}}

/*** SHRINK ***/
@media (max-width: 431px) {header a {font-size: 13px; }}
@media (max-width: 380px) {header a {font-size: 12px; } #logo {width:108px}}
@media (max-width: 340px) {header a {font-size: 10px} #logo {width:96px;} }


/**** Mid Body ***/
mid-body {display: block;  max-width: 960px; margin: 0 auto; border-bottom:solid 1px #ccc;}

/*** 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 3%; font-size: 16px; line-height: 140%;}

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);
}
side-bar ul{margin:32px 0}

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;}
	main {border-right:solid 1px #ccc;}
  side-bar {
	display: block;
	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 #ccc;
  border-bottom:1px solid #ccc;
  border-left:1px solid #ccc;
  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 .logo  { 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:#777; color:#fff;
  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 #ccc; background:#fff; border-radius:0; }
details p {margin:16px 0;}
details ul, details ol {margin:0;}
summary{
  position:relative; display:block; cursor:pointer; user-select:none; margin:0;
  /* icon width (18) + gap (8) + breathing space (8) = 34px */
  padding:12px 34px 12px 12px;
  list-style:none; outline:0;
}
summary:hover{ background:#f5f5f5; }
summary::-webkit-details-marker, summary::marker{ display:none; content:""; }
/* keyboard focus */
/* open summary style */
details[open] > summary{ background:#eee; color:#369; }

/* ::after = circle ring + horizontal 1px line (minus) */
summary::after{
  content:"";
  position:absolute; top:50%; right:8px;
  width:18px; height:18px;
  transform:translateY(-50%); transform-origin:50% 50%;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">\
    <circle cx="9" cy="9" r="8" fill="none" stroke="black" stroke-width="1"/>\
    <path d="M5 9h8" fill="none" stroke="black" stroke-width="1" stroke-linecap="round"/>\
  </svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">\
    <circle cx="9" cy="9" r="8" fill="none" stroke="black" stroke-width="1"/>\
    <path d="M5 9h8" fill="none" stroke="black" stroke-width="1" stroke-linecap="round"/>\
  </svg>') center/contain no-repeat;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
summary::before{
  content:"";
  position:absolute; top:50%; right:8px;
  width:18px; height:18px;
  transform:translateY(-50%); transform-origin:50% 50%;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">\
    <path d="M9 5v8" fill="none" stroke="black" stroke-width="1" stroke-linecap="round"/>\
  </svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">\
    <path d="M9 5v8" fill="none" stroke="black" stroke-width="1" stroke-linecap="round"/>\
  </svg>') center/contain no-repeat;
  transition: opacity .28s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

details[open] > summary::after{ transform: translateY(-50%) rotate(360deg); }
details[open] > summary::before{ opacity:0; transform: translateY(-50%) rotate(180deg);}

/* ===================== Panel (custom tag) ===================== */
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 {background:#eee}
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;
  background: linear-gradient(to right, #fff 30%, #ccc 100%) left bottom/100% 1px no-repeat;
}
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{
  text-align:right; color:#369;
  padding:8px 34px 8px 12px;
  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 summary{background:#f7f7f7}
details.index[open] summary{background:#ddd}
details.index ol {font-size:87%; column-count:2; column-gap:32px; column-rule:1px solid #ccc;}
details.index li {border-bottom: 1px solid #ccc; margin: 0px; list-style-position:inside; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
details.index li:hover {background:#fff;align-content: }
details.index > d-panel {background: #f7f7f7}

/******** Tabs — compact radio version (no JS) ********/
.Tab{
  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 p {margin: 16px 0;}

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

/* Tab faces (direct <label> elements) */
.Tab > 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 > label:first-of-type{ margin-left:20px; }

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

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

/* z-index slope (left tabs above right tabs) */
.Tab > label:nth-of-type(1){ z-index:5; }
.Tab > label:nth-of-type(2){ z-index:4; }
.Tab > label:nth-of-type(3){ z-index:3; }
.Tab > label:nth-of-type(4){ z-index:2; }
.Tab > 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{border-left: none; border-right: none; box-shadow: none;}
.Tab > label:first-of-type{ margin-left:12px; }
.Tab > Label {font-size: 85%;height:24px; line-height:24px;}
.Tab > 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 > label:nth-of-type(4){ display: none; } .Tab > label:first-of-type{ margin-left:6px; }}
@media (max-width: 359px){.Tab > Label {font-size: 80%; padding: 0 12px;}.Tab > label:first-of-type{ margin-left:4px; }}