@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:16px 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,'); background-repeat:no-repeat; background-position: 0 14px;}
@media only screen and (max-width: 560px) {.grid-321 {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media only screen and (max-width: 380px) {.grid-321 {grid-template-columns: 1fr ;}}
box-a {display:block; position: relative; border: solid 1px #36c; border-radius: 6px; padding: 16px; margin-top: 32px; margin-bottom: 32px;}
box-a>key-words {font-size: 80%; color:#369; line-height:20px; background: #fff; position: absolute; top: -16px; left: 20px; border: solid 1px #36c; border-radius: 16px; padding: 4px 16px;}
box-a>end-words{font-size: 80%; color:#369; line-height:20px; background: #fff; position: absolute; bottom: -16px; right: 20px; border: solid 1px #36c; border-radius: 16px; padding: 4px 16px;}
box-a:has(>key-words){margin-top:48px; padding-top:24px}
box-a:has(>end-words){margin-bottom:48px; padding-bottom:24px}
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; text-align:right; margin: 16px 0;}
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::before {
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-right: 8px; position:relative; bottom: -2px; }
right-link:hover a::before {
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:3px; bottom: -1px;}
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::before {
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-right: 8px; }
down-load:hover a::before{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"); position:relative; bottom:-2px}
body, pre {
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: 24px 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,'); background-repeat:no-repeat; background-position: 0 14px;}
ul.box-uncheck, side-bar li{padding-left: 32px; margin-left:0; list-style-type:none; background: url('data:image/svg+xml;utf8,'); 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,'); 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; }
table { border-collapse: collapse; border-spacing: 0; }
h1, h2, h3, h4, h5, h6 {position: relative; color: #336699; font-weight: 600; line-height:1.3}
h1 {margin-top:48px; font-size: clamp(24px, 4.5vw, 40px); padding: 8px 0; }
h2{
position: relative; isolation: isolate;
margin: 80px auto 32px;
font-size: clamp(24px, 3.2vw, 34px);
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., */
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: 32px 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:#ddd; 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;}
/*
@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 1.8%;
white-space: nowrap;
overflow: visible;
}
nav a {display:inline-block; text-decoration: none !important; }
#logo {position:relative; margin-top: -8px; margin-left: 1%;}
#logo-text-placeholder{position: relative; left:-10px; width:auto;}
logo-block {display:inline-block; width:122px}
@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}}
@media (max-width: 700px) { }
/***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;}
header a {font-size: 15px;} }
@media (max-width: 512px) { header a {font-size: 14px; }
a#research {display: none;}
a#about2 {border-left: none;}}
@media (max-width: 431px) { header a {font-size: 13px; }}
@media (max-width: 380px) { header a {font-size: 12px; }}
/***Shrink Logo 8**/
@media (max-width: 359px) {#logo-text-placeholder {width:0;} logo-block {width:48px}}
@media (max-width: 330px) {#guide svg {display:none;}}
/***** Nav button CSS *****/
@keyframes rotate-always {from {transform: rotate(0deg); transform-origin: 20px 20px 0;} to {transform: rotate(719deg);}}
@keyframes rotate-hover {from {transform: rotate(0deg); transform-origin: 20px 20px 0;} to {transform: rotate(1079deg);}}
#logo-ring {transform-origin: 50% 50% 0; animation: rotate-always 28s infinite linear;}
a#logo:hover #logo-ring { transform-origin: 50% 50% 0; animation: rotate-hover 2s ease;}
#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: -18px; left:0; color:#930; background: #fff; display:inline-block;z-index:10; padding:3px 8px; line-height:1; font-size:13px; height:24px; border: solid 0.5px #930; border-radius: 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:0px; left:0px; color:#930; display:inline-block;z-index:10; padding:3px 8px; line-height:1; font-size:12px; height:24px; border: solid 0.5px #930; border-radius: 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(16px,0,0); }
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:10px; width:48%}
@media (max-width:720px){right-flex-reverse-48{display:flex; margin-top:-12; flex-direction: column-reverse;} 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:10px; width:33%}
@media (max-width:600px){right-flex-reverse-33{display:flex; margin-top:-12px; flex-direction: column-reverse;} 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:10px; width:48%}
@media (max-width:720px){left-flex-reverse-48{display:flex; margin-top:-12px; flex-direction: column-reverse;} left-flex-reverse-48 figure{width:100%; margin:0 auto}}
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; margin-top:-12px; flex-direction: column-reverse;} 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%; border: solid 1px #ccc; border-width: 1px 0;}
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}
@media (min-width: 1080px) {
mid-body {display:grid; grid-template-columns: 1fr 320px; align-items:start; gap: 0; max-width: 1300px;}
main {}
side-bar {
border-width: 0 0 0 1px;
display: block;
margin-top: 16px;
position: sticky;
top: 108px;
padding: 0 24px;
}}
footer {
width: 100%;
background: #eee;
border-bottom: solid 1px #ccc;
margin-top: 48px;
}
footer-menu {display: block;
max-width: 1300px;
margin: 0 auto;
padding: 0 16px;
}
footer a {
display: inline-block;
line-height: 48px;
padding: 0 1.5%;
text-decoration: none;
font-size: 14px;
}
bottom-line {
display: block;
max-width: 960px;
margin: 0 auto;
background: #fff;
clear: both;
;
font-size: 12px;
text-align: right;
padding-right: 16px;
padding-bottom: 48px;
}
contact-form {display: block}
contact-form iframe {
width: 100%;
height: 720px;
border: none;
}
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;
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; font-weight:500; }
/* ::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,\
') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,\
') 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,\
') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,\
') 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:0 4px 0 8px; opacity: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;}
details.single summary {background:#f7f7f7}
details.single[open] summary {background:#eee}
details.title-right{
border:none; border-radius:8px; font-size:90%;
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; }
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;}
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}
faq-risk, faq-use, faq-study, faq-support {display:block}
faq-risk details > summary, faq-risk details[open] > summary {background:#F9D48E; border-bottom: solid 1px #aaa;}
faq-use details > summary, faq-use details[open] > summary {background:#EFEFF7; border-bottom: solid 1px #aaa;}
faq-study details > summary, faq-study details[open] > summary {background:#E5F0E7; border-bottom: solid 1px #aaa;}
faq-support details > summary, faq-support details[open] > summary {background:#EFD7D8; border-bottom:solid 1px #999;}
/******** 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