body,div,a,img,table,tr,td,p,figure,pre,iframe,ins,del,article,header {
margin: 0; padding: 0; box-sizing: border-box; }
del,span,#sort a,.goods a {
display: inline-block; }
.backdrop,h2,h6,p._,#make,aside p {
border-top: 1px solid #000; }
.backdrop,h2,p._,#menu {
border-bottom: 1px solid #000; }
h1,h2,h3,h4,h5,h6,p,#sort a,#flow,a.row,#website a {
white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
h1,h2,ins,#sort,#flow,footer,form,aside a,#make {
text-align: center; }
h2,h3,#sort a,#flow,p._ {
font-size: 20px; }
body,h5,em { font-size: 19px; }
a._,a.row,#home a,aside a {
text-decoration: none; }
body,input,textarea {
font-family: Georgia, serif; }
input, textarea, select { border: 3px ridge;
background: transparent; width: 96%;
box-sizing: border-box; }
input[type="checkbox"] { width: initial; }
::placeholder { color: #A0A000; }
button { background: rgba(255,255,255,0.9); }
html,body { height: 100%; }
body { overflow: hidden; line-height: 1.1;
background: linear-gradient(#E5F5FF,
#EAFAFF 20%, #F5FAF5 45%,
#FAFAF5 55%, #E5F5FF 65%,
#DAF0FF 75%, #BAE0FF 100%);
user-select: none; }
section,strong,code,h1,h5 { user-select: text; }
main { z-index: 10; margin: 0 auto;
padding: 0; width: 100%; height: 100%;
max-width: 600px; position: absolute;
top: 0; left: 0; right: 0;
overflow-x: hidden; overflow-y: scroll; }
table { border-collapse: collapse;
border-spacing: 0; table-layout: fixed; }
article>table, .backdrop>table { width: 100%; }
header { height: 52px; overflow: hidden; }
#sort div { display: none; }
#sort span { width: 24px; }
#sort a { margin: 3px; }
#sort td:nth-of-type(1) { text-align: right; }
#sort td:nth-of-type(3) { text-align: left; }
p._ { position: relative; padding: 4px 20px;
background: rgba(255,255,255,0.7); }
p._::before { content: "";
display: inline-block; height: 22px;
border-left: 3px solid #00B0C0;
border-right: 3px solid #00B0C0;
border-radius: 5px; background: #00B0C0;
position: absolute; top: 4px; left: 8px; }
p._>a:first-of-type::before {
content: "\9996\9875"; }
p._>span::before {
content: ""; display: inline-block;
width: 10px; height: 10px;
border-style: solid solid none none;
border-width: 3px; border-color: #00B0C0;
transform: rotate(45deg) skew(-20deg, -20deg);
margin: 0 11px 0 3px; }
p._>a[href^="javascript"] {
position: absolute; right: 8px; }
a._,a.row { display: block;
margin: 6px 6px 0;
background: linear-gradient(rgba(255,255,255,0.5), rgba(200,200,200,0.5));
border: 1px outset #CCC;
border-radius: 8px; }
a._ { padding: 0 4px 0 0; position: relative; }
a._ img { width: 44px; height: 44px;
margin: 0 0 0 4px; padding: 0;
border-radius: 3px; vertical-align: bottom; }
a._ span { margin: 0 0 0 1px;
font-size: 36px; }
a.row { padding: 4px 0 4px 4px; }
a.row[href^="j"] { text-align: center;
position: relative; }
a.row p { width: 96vw;
max-width: 530px; }
a.row[add] { display: inline-block;
padding: 4px 6px; float: right; }
a.row img { width: 20px; height: 20px;
position: absolute; top: 3px; left: 5px; }
a._:last-of-type { margin-bottom: 8px; }
a.row:last-of-type { margin-bottom: 6px; }
h5,h6 { font-weight: normal; }
h5 { margin: 3px 0 0; padding: 0; }
h6 { margin: 2px 0; padding: 4px 0 0;
font-size: 17px; color: initial; }
h1 { margin: 4px; font-size: 22px; }
#menu { padding: 0 4px 3px;
font-size: 18px; text-align: right; }
#menu span { float: left; color: #00C000; }
#menu i { font-style: normal; margin: 0 3px 0 0; }
#menu u { text-decoration: none; margin: 0 8px 0 1px; }
#menu b { margin: 0 2px 0 0; font-weight: normal; }
#menu form { display: inline-block; float: right;
position: relative; bottom: 5px; }
#menu button { padding: 1px 30px; }
section { margin: 3px 0 3px 3px;
padding: 0; word-break: break-all; }
section._ { white-space: pre-wrap; }
h3 { margin: 4px;
padding-left: 2px; color: #00C000;
border-left: 4px solid #00C000; }
a._[href*="://"]::before,section a[href*="://"]::after {
content: "\5916\94fe";
color: #FF8A00; font-size: 13px;
display: inline-block; margin: 0 1px;
border: 1px solid #FF8A00; }
a._[href*="://"]::before {
position: absolute; top: 3px; right: 3px; }
pre { margin: 2px 5px 3px 2px;
padding: 0; line-height: 1.2;
font-size: 16px; color: #FFF; }
pre::before {
content: "<<   Can slide   >>";
display: block; text-align: center;
background: #00AAFF; }
code { display: block;
margin: 0; padding: 2px 2px 2px 4px;
background: rgba(0,0,0,0.9);
overflow-x: scroll; }
code span { margin-left: 20px;
color: #00FF00; user-select: none; }
code kbd::before {
content: "\21b5";
margin-right: 3px; }
code::selection { color: #FFF;
background-color: #00A0FF; }
header a:first-of-type { position: absolute; left: 4px; }
header a:last-of-type { position: absolute; right: 4px; }
header a:first-of-type,header a:last-of-type {
display: inline-block;
text-align: center; top: 4px;
animation: _06 1s linear 1; }
@keyframes _06 {
0% { transform: translateY(-60px); }
50% { transform: translateY(10px); }
100% { transform: translateY(0); } }
ins,del { text-decoration: none; }
ins { line-height: 1;
text-shadow: 0 0 1px #80E0FF;
position: absolute; }
ins:nth-child(1) { transform: translateZ(1px); }
ins:nth-child(2) { transform: translateZ(2px); }
ins:nth-child(3) { transform: translateZ(3px); }
ins:nth-child(4) { transform: translateZ(4px); }
ins:nth-child(5) { transform: translateZ(5px); }
ins:nth-child(6) { position: static; }
del { padding-bottom: 3px;
overflow: hidden; position: relative; }
del::before {
content: "\26F5\5168\7F51\7CBE\54C1\5BFC\822A";
font-size: 28px; color: #009090; }
del::after {
content: "\FE4F\FE4F\FE4F";
font-size: 20px; color: transparent;
position: absolute; bottom: 0; right: 0;
transform: scale(6, 1) translate(3px, 0);
transform-origin: 100% 100%;
animation: _86 2s infinite linear; }
@keyframes _86 { 100% {
transform: scale(6, 1) translate(23px, 0); }}
figure { width: fit-content; margin: 12px auto 0;
animation: _68 6s ease-in-out infinite;
transform-origin: center center;
transform-style: preserve-3d; }
@keyframes _68 {
0%,100% { transform: rotate3d(1,1,0,35deg); }
25% { transform: rotate3d(-1,1,0,35deg); }
50% { transform: rotate3d(-1,-1,0,35deg); }
75% { transform: rotate3d(1,-1,0,35deg); } }
.backdrop { position: relative; padding: 4px;
background: rgba(255,255,255,0.7); }
#flow {
background: -webkit-linear-gradient(left,
#D050FF, #00BFFF 20%, #30CA30 40%,
#FF9A00 60%, #FF0000 80%, #D050FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-size: 200% 100%;
-webkit-animation: _66 2s infinite linear; }
@keyframes _66 {
0% { background-position: 200% 0; }
100% { background-position: 0 0; } }
#home { margin-bottom: 15px; }
#home a { display: table; margin: 15px auto 0; }
#home table { border-radius: 13px;
white-space: nowrap; position: relative; }
#home img { width: 80px; height: 80px;
margin: 3px 4px 0; }
#home span { margin: 3px 0 0 1px;
font-size: 70px; }
#home table td:nth-of-type(2) {
line-height: 1.3; }
#home td[up] { padding: 4px 4px 0 2px;
font-size: 16px; color: #000; }
#home td[down] { padding-left: 3px;
text-align: center; }
#home td em { padding-right: 4px;
color: #8B4000; }
#home em i { margin: 0 2px 0 1px; }
footer { margin: 0; padding: 8px 0;
color: #FFF; font-size: 14px;
background: rgba(0,0,0,0.7);
position: absolute;
bottom: 0; left: 0; right: 0; }
footer a { font-size: 17px;
position: absolute; right: 6px; }
form { margin: 3px 0 0; }
#make textarea { height: 45px;
margin: 4px 0 0; }
#make button { padding: 0 8px; }
#make em { display: none;
margin-top: 2px; font-size: 17px;
position: absolute; left: 6px; }
#make em:nth-of-type(1) { color: orange; }
#make em:nth-of-type(2) { color: green; }
#make em:nth-of-type(3) { color: red; }
aside { margin: 0 0 3px 3px; padding: 0; }
aside p { margin: 5px 3px 3px 0;
padding: 5px 0 0; color: green; }
aside span { float: right; color: brown; }
aside a { display: block;
margin: 0 3px 3px 0;
padding: 1px; font-size: 18px;
background: rgba(0,0,0,0.1);
border: 1px solid #000; }
dialog { width: 92vw; min-height: 50vh;
padding: 0 0 2px 4px;
background-color: rgba(255, 255, 255, 0.9);
text-align: left; }
dialog>span { margin: 5px 0 2px 0;
color: green; font-size: 17px; }
dialog>div { font-size: 17px; color: green;
margin-bottom: 2px; overflow: auto; }
dialog>a:first-of-type { float: right;
font-size: 17px; margin: 5px 5px 0 0; }
dialog>iframe { border: none;
width: 100%; height: 80vh; }
dialog>hr { margin: 4px 3px 3px 0; }
.test { text-align: center; margin-right: 3px; }
.test img { width: 92%; }
.test input { margin: 3px 0 5px; }
.test button { margin: 0 30px; }
.test hr { margin: 7px 0 7px; }
#out div:not([class]) { margin: 0 1.5%; }
#out input[placeholder] { padding: 2px;
width: 100%; }
#out textarea { height: 200px;
margin-top: 3px; }
#part { margin-bottom: 3px; }
#out select { width: 116px;
position: absolute; left: 1.5%;
margin: 3px 0 0; }
#out button { margin: 4px 0 0; }
#out a { font-size: 14px;
margin-top: 7px;
position: absolute; right: 1.5%; }
#out span { position: absolute;
right: 2.5%; margin-top: 5px;
font-size: 14px; color: #00C000; }
#wait { margin: 3px 0 0 7px;
display: none; font-weight: bold; }
.hint { margin: 5px 0 0 3px; color: red; }
.hint b { color: blue; }
[type="search"] { display: block;
width: 96%; font-size: 19px;
margin: 3px auto; padding: 3px;
border-radius: 6px; }
h2 { background: rgba(255,255,255,0.7);
margin: 4px 0; padding: 3px 0 1px; }
#website a { display: block;
margin-left: 4px; line-height: 1.4; }
#website img { margin-right: 2px;
width: 22px; height: 22px;
vertical-align: middle; }
#media p { position: relative;
line-height: 1.4; margin-left: 2px; }
#media p a::before {
content: "\25B6\64AD\653E";
position: absolute; right: 0px;
padding: 0 2px 0 15px; color: green;
background: linear-gradient(90deg,
rgba(255,255,255,0), rgba(255,255,255,0.6) 25%,
rgba(255,255,255,0.9) 100%); }
#media input { border: none; outline: none;
width: 100%; font-size: 19px; color: #0060FF;
background-color: transparent; }
.shop { display: block;
position: relative; margin: 0 0 2px 4px;
text-decoration: none; line-height: 1.2; }
.shop img { width: 100px; height: 100px; }
.shop td:last-of-type { vertical-align: top;
padding: 3px 0 0 4px; color: #000; }
.shop strong { display: block;
font-size: 20px; color: #0090FF;
margin-bottom: 3px; }
.shop span { display: block;
position: absolute; bottom: 6px;
color: orange; }
.shop span::before { content: "\FFE5"; }
.shop[href^="taobao"]::before {
content: "\6DD8\5B9D\41\50\50";
position: absolute; bottom: 6px; right: 6px;
font-size: 16px; color: #00C000; }
body>canvas { display: absolute;
top: 0; left: 0; z-index: -20; }
body>span { padding: 3px;
white-space: pre-wrap; color: #000;
background: rgba(255,255,255,0.9);
border: 2px solid #00C000; z-index: 20;
width: fit-content; max-width: 96%;
border-radius: 8px; margin: 0 auto;
position: absolute; left: 0; right: 0;
animation: _08 2s ease-in-out infinite; }
@keyframes _08 {
0%,100% { transform: translateY(20px); }
50% { transform: translateY(40px); }}
.slider { overflow: auto; }
.slider textarea { font-family: monospace;
width: 180%; margin: 0 1.5%; }
.dark { background: #000; color: #FFF; }
.dark a:not(dialog a, p._ a) { color: #00FFFF; }
.dark h6 { color: #FFF; }
.dark #media input { color: #00FFFF; }
.dark .shop td:last-of-type { color: #FFF; }
.dark #menu { border-bottom: 1px solid #FFF; }
.dark footer { background: transparent;
border-top: 1px solid #FFF; }
.dark textarea:not(dialog textarea), .dark select,
.dark input:not(dialog input) { color: #FFF; }
.dark ::selection { color: #FFFF00;
background: rgba(0, 190, 160, 0.5); }